jQuery mobile $(документ).готовый эквивалент

На страницах навигации ajax классическая форма "document ready" для выполнения инициализации javascript просто не срабатывает.

Как правильно выполнить некоторый код на загруженной странице ajax?

(я имею в виду, не мой Аякс... это мобильная навигационная система jQuery, которая приводит меня на эту страницу)

Хорошо, я действительно подозревал что-то в этом роде... большое спасибо=) но... это все еще не работает, вот мой код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mypage</title>

    <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
    <script type="text/javascript">
        $('div').live('pageshow',function(event, ui){
          alert('ciao');
        });
    </script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">
            <h1>Shopping Cart</h1>
        </div>

        <div data-role="content"> asd


        </div>

    </div>

</body>

Нужно ли мне это делать? укажите идентификатор div?

6 24
ajax jquery-mobile document-ready

6 ответов:

Я потратил некоторое время на исследование того же самого, так как документы JQM на данный момент не очень детализированы. Решение ниже прекрасно работает для меня: 

<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});
</script>

Вы должны реализовать свой собственный поток проверки, чтобы предотвратить многократную инициализацию, так как приведенный выше код будет выполняться при каждом изменении страницы

19

Привязка к событию "pageinit". Из документов JQM: http://api.jquerymobile.com/pageinit/

14

Лучшим эквивалентом $(document).ready() является $(document).bind('pageinit')

Просто взгляните на документацию jQuery Mobile: http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Важно: используйте $(документ).bind ('pageinit'), а не $(document).ready ()

Первое, что вы узнаете в jQuery, - это вызов кода внутри $(документ).функция ready (), так что все будет выполняться, как только Дом заряжен. Однако в jQuery Mobile Ajax используется для загрузки содержание каждая страница в дом, как вы ориентируетесь, и дом готов обработчик выполняется только для первой страницы. Чтобы выполнить код, когда новая страница загружается и создается, вы можете привязать к событию pageinit. Это событие подробно описано в нижней части этой страницы.

12

Если вы хотите, чтобы код выполнялся на определенной странице (Я уверен, что это так) , вы можете использовать следующий шаблон: 

$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
    // code to execute on that page
    //$(this) works as expected - refers the page
});

События, которые вы можете использовать:

  • pagebeforeshow начинается непосредственно перед переходом
  • pageshow начинается сразу после перехода
  • pagecreate запускается только при первой загрузке страницы
5

Все события pageshow и pagebefore show вызываются каждый раз, когда они отображаются. Если вы хотите, чтобы что-то произошло в первый раз, вы можете сделать что-то вроде этого: 

  $('#pageelementid').live("pagecreate", pageInitializationHandler);

Затем в дальнейшем в вашем коде: 

  function pageInitializationHandler(event) {
      //possibly optional based on what exactly you're doing,
      //but keep it in mind in case you need it.
      //Also, this seems to need to be an exact duplicate of the
      //way you used it with the .live() method or jQ/jQM won't unbind
      //the right thing
      $('#pageelementid').die("pagecreate", pageInitializationHandler);

      //Do your actual initialization stuff
  }

Я нашел это особенно полезным, когда вы делаете html-файлы с несколькими "страницами" JQM в них. Я настроил свой так, что фактический код инициализации для всего shebang находится на моей главной странице (файла), а затем все остальные подстраницы имеют обработчик pagecreate, который проверяет, сработал ли код инициализации, и если нет, делает $.мобильный.changePage ("#mainpage"). Работает довольно хорошо.

3

Как уже упоминалось, событие pageinit действительно работает. Однако, если у вас была ситуация с несколькими физическими страницами (например, переход из индекса.html для mypage.html), функция, которая выполняется, находится на родительском объекте.

Любая логика в pageinit должна быть чем-то относящимся к родителю, а не к загружаемой ссылке. Вы не можете вызвать функцию на странице, к которой вы переходите, потому что навигация обрабатывается с помощью обратного вызова ajax в JQM, и элементы на вашей дочерней странице будут недоступны масштаб.

В данном конкретном случае можно использовать атрибут data-ajax="false": 

<a href="mypage.html" data-ajax="false">My Page</a>

Это приведет к удалению навигации ajax, полной перезагрузке страницы, которая, в свою очередь, вызовет $(document).готовая функция на странице, которую вы загружаете.

1