Как инициализировать страницы в jquery mobile?Pageinit не стреляет - PullRequest
Новая
       4

Как инициализировать страницы в jquery mobile?Pageinit не стреляет

41 голосов
/ 25 сентября 2011

Как правильно инициализировать объекты на мобильной странице jquery? events docs говорит, что использует "pageInit()" без примеров этой функции, но дает примеры привязки к методу "pageinit" (обратите внимание на разницу регистра).Однако на этой простой тестовой странице событие вообще не отображается: 

<html>
 <body>  
  <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>  
  <script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

  <div data-role="page" id="myPage">
    test
  </div>

  <script>
    $("#myPage").live('pageinit',function() {
        alert("This never happens");
    });
  </script>
 </body>
</html>

Чего мне не хватает?Я должен добавить, что если вы измените pageinit на другое событие, например pagecreate, этот код будет работать.

---- ОБНОВЛЕНИЕ ----

Эта ошибка помечен как закрытый в трекере проблем JQM.Очевидно, мнения расходятся о том, работает ли это должным образом.

Ответы [ 11 ]

66 голосов
/ 03 октября 2011

Это начало работать, когда я встроил скрипт в страницу div: 

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

Используется jQuery Mobile 1.0RC1

21 голосов
/ 11 сентября 2012

.live() устарело, советуем использовать .on() в jQuery 1.7+: 

<script type="text/javascript">
    $(document).on('pageinit', '#indexPage',  function(){
        // code 
    });
</script>

Проверьте онлайн документ для получения дополнительной информации о .on(): http://api.jquery.com/on/

9 голосов
/ 28 сентября 2011

Оказывается, это ошибка в 1.0b3, которая исправлена ​​в текущей голове.Так что, если вы хотите исправить это сейчас, вам нужно получить последнюю версию git .Или дождитесь следующего релиза.

2 голосов
/ 23 ноября 2012

pageinit не сработает, если он находится на дополнительных страницах (НЕ ГЛАВНАЯ), если он записан общим тегом ...

У меня такая проблема - на вторичных страницах, которые не загружены с помощью 'rel = "external"', код в общем теге никогда не выполняется ...

на самом деле этот код всегда выполняется ... 

<body>
    <div id="indexPage" data-role="page">
        <script type="text/javascript">
            $("#indexPage").live('pageinit', function() {
                // do something here...
            });
        </script>
    </div>
</body>

несмотря на то, что вы создали «интерфейс с вкладками», лучше использовать «pageshow»

2 голосов
/ 24 мая 2012 
jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

Это работает сейчас.Теперь все переходы страниц и все функции JQM AJAX будут работать вместе с вашими определенными функциями javascript!Наслаждайтесь! * * 1002

1 голос
/ 01 марта 2013

@ Войцех Банцер

Из документации jQuery: 

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().
1 голос
/ 28 августа 2012

Я нашел самый простой способ справиться с этим - использовать JQM + Steal. Это работает как шарм, пока вы положили: 

<script type='text/javascript' src='../steal/steal.js?mypage'></script>

Внутри data-role='page' div.

Затем используйте AJAX для подключения всего, что может использовать тот же mypage.js, и используйте внешнюю ссылку (с помощью тега rel="external") ко всему, что требует другой страницы кражи.

1 голос
/ 29 декабря 2011

Мне пришлось поместить скрипт в раздел HTML-страницы, что для меня является ошибкой. Обычно он загружается в браузер (не через AJAX) и все на одной странице, включая JavaScript. Мы не должны использовать готовый документ.

0 голосов
/ 14 декабря 2012 
$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});
0 голосов
/ 22 февраля 2012

Попробуйте это: 

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});
Страница:
...