jQuery mobile $ (документ). уже эквивалент - PullRequest
Новая
       18

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

24 голосов
/ 11 апреля 2011

на страницах навигации 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?

Ответы [ 7 ]

19 голосов
/ 12 апреля 2011

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

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

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

14 голосов
/ 19 ноября 2011

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

12 голосов
/ 14 августа 2012

Лучший эквивалент $(document).ready() равен $(document).bind('pageinit')

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

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

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

5 голосов
/ 12 апреля 2011

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

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

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

  • pagebeforeshow запускается непосредственно перед переходом
  • pageshow запускается сразу после перехода
  • pagecreate запускается только при первой загрузке страницы
3 голосов
/ 04 сентября 2011

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

1 голос
/ 27 февраля 2012

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

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

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

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

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

0 голосов
/ 10 января 2019

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

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

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

...