Как инициализировать страницы в jQuery mobile? Не показывать

Каков правильный способ инициализации объектов на мобильной странице jquery? 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, этот код работает.

---- UPDATE ----

Эта ошибка отмечена как "закрытая" в трекер JQM. По-видимому, мнения различаются по поводу того, работает ли это нормально или нет.

Ответ 1

Он начал работать, когда я ввел script в страницу 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

Ответ 2

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

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

Обратитесь к онлайн-документу за дополнительной информацией о .on(): http://api.jquery.com/on/

Ответ 3

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

Ответ 4

jQuery(document).live('pageinit',function(event){
    centerHeaderDiv();
    updateOrientation();
    settingsMenu.init();
    menu();
    hideMenuPopupOnBodyClick(); 
})

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

Ответ 5

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

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

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

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

если вы создали "интерфейс с вкладками", лучше использовать "pagehow"

Ответ 6

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

Ответ 7

Самый простой способ, с которым я столкнулся, это использовать JQM + Steal. Он работает как шарм, пока вы кладете:

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

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

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

Ответ 8

@Wojciech Bańcer

Из документов 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().

Ответ 9

Попробуйте следующее:

$('div.page').live('pageinit', function(e) {
    console.log("Event Fired");
});

Ответ 10

$(document).on("pageinit", "#myPage", function(event) {
   alert("This page was just enhanced by jQuery Mobile!");
});

Ответ 11

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

<script>
  $(document).ready(function() {
      alert("This happens");
  });
</script>