JQuery mobile $(document).ready эквивалент

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

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

(Я имею в виду, не мой 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?

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

$('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

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

  $('#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, который проверяет, был ли запущен код инициализации, а если нет, $.mobile.changePage( "# mainpage" ). Хорошо работает.

Ответ 6

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

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

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

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

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

Ответ 7

Это относительно просто. Я думаю, я понимаю вашу проблему, вы хотите, чтобы это событие произошло один раз, а не неоднократно, верно? Если это так, сделайте это так

$(document).one('pageinit', function(){//write your code here })

В этом случае "pageinit" произойдет один раз. Если вы хотите узнать больше о методе jQuery one(), проверьте здесь