JQuery Mobile pageinit/pagecreate not firing

У меня 5 страниц - для удобства можно сказать:

one.html
two.html
three.html
four.html
five.html

Когда я загружаю каждую отдельную страницу, срабатывают как pageinit, так и pagecreate.

Проблема:

Когда я перехожу из one.html в two.html, pageinit и pagecreate оба огня, НО, когда я возвращаюсь к one.html(from two.html), pageinit и pagecreate НЕ НЕТ Огонь.

Почему это и как я могу всегда запускать pageinit и pagecreate при загрузке страницы, а также перемещаться по каждой странице?

Update:

Для каждой страницы у меня есть:

<div data-role="page" id="page-name">

 // content
</div>

Чтобы проверить порядок во время стрельбы, я делаю:

$(document).on('pagecreate','[data-role=page]', function(){
  console.log('PAGECREATE');
});
$(document).on('pageinit','[data-role=page]', function(){
  console.log('PAGEINIT');
});
$(document).on('pagebeforeshow','[data-role=page]', function(){
  console.log('PAGEBEFORESHOW');
});
$(document).on('pageshow','[data-role=page]', function(){
  console.log('PAGESHOW');
});

Как использовать обмен страницей всегда для вызова pageinit и pagecreate

Ответ 1

Вы проверяете неправильные события, pageinit и pageshow, о чем вас беспокоит.

pageinit срабатывает каждый раз, когда страница загружается в первый раз, jQM кэширует страницы в DOM/памяти, поэтому, когда вы переходите обратно с two.html на one.html, pageinit не запускается ( он уже инициализирован)

pagehow срабатывает каждый раз, когда отображается страница, это то, что вам нужно искать, когда вы переходите обратно с two.html на one.html

Вместе вы можете извлечь много чистого кода, использовать pageinit для инициализации, конфигурации и т.д. и обновить DOM до исходного состояния. Если у вас есть динамические данные на странице, которые могут меняться между представлениями, обрабатывайте их на страницах

Здесь хороший дизайн для более крупных веб-сайтов, которые мы используем в производственной среде:

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

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){
Я ссылаюсь на каждую страницу с именем: <div data-role="page" data-mypage="employeelist"> В этом живом событии вы можете в основном иметь оператор switch для каждой страницы "имя", а затем проверить event.type для pageinit/pageshow или обоих и поместить там свой код, а затем каждый раз, когда страница создается или отображается, это событие будет запущено, он знает, какая страница вызвала его, а затем вызывает соответствующий код
Теперь, независимо от того, какая точка входа пользователь наносит на ваш сайт, загружаются все обработчики для всех страниц. Как вы уже знаете, когда вы переходите на страницу, она втягивает только <script/> в div [data-role = "page" ] - игнорируя любой JS в <head/>, размещение отдельного JS на каждой странице является беспорядок, и его следует избегать на любом крупном сайте, который я считаю
Попытайтесь не использовать селектора одеяла в вашем jQuery, например. $('div.myClass'), так как это приведет к поиску всей вашей DOM, которая может содержать более одной страницы jQM. К счастью, в обработчике событий liveinternet/pageshow, указанном выше, this относится к текущей странице. Так что все DOM-запросы внутри него, например. $(this).find('div.myClass') это гарантирует, что вы только захватываете элементы на текущей странице. (конечно, это не проблема для идентификаторов). Обратите внимание, что в событии showhow вы также можете использовать $.mobile.activePage, но это недоступно в файле pageinit, поэтому я не использую его для согласованности

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

Недостатком является то, что все ваши js для всего вашего сайта загружаются на первую страницу, которую пользователь достигает, но минимализированный даже большой сайт меньше, чем jQuery или jQM, поэтому это не должно вызывать беспокойства. Но если ваш сайт действительно большой, я полагаю, вы могли бы изучить RequireJS.

Преимущество заключается в том, что вы больше не загружаете все свои JS для каждой страницы через AJAX каждый раз, когда пользователь переходит на новую страницу. Если все ваши JS доступны для входа, вы можете теперь легко отлаживать отладочные заявления и отлаживать их!

Ответ 2

Я считаю, что pageinit и pagecreate вызываются только один раз, когда страница сначала инициализируется и создается в DOM, соответственно.

Возможно, вы захотите изучить событие pagechange http://jquerymobile.com/test/docs/api/events.html

Ответ 3

Вам требуется прочитать информацию о событиях jQuery Mobile: http://jquerymobile.com/demos/1.1.0/docs/api/events.html

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

pageinit

Инициализируется на начальной странице после инициализации. Мы рекомендуем привязываться к этому событию вместо DOM ready(), потому что это будет работать независимо от того, загружена ли страница напрямую или если содержимое переносится на другую страницу как часть навигации Ajax система.

pageshow

Запущен на "toPage" после анимации перехода завершено. Обратные вызовы для этого события получат объект данных как их второй аргумент. Этот объект данных имеет следующие свойства: prevPage (object) Объект коллекции jQuery, содержащий страницу DOM, от которого мы только что отказались. Обратите внимание, что это сбор пуст, когда первая страница переводится во время запуск приложения.

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

Ответ 4

Если вы хотите вызывать некоторую функцию каждый раз перед загрузкой страницы, вы можете использовать pagebeforeshow i.e.

  $("#YourPageID").on('pagebeforeshow ', function() {
        //YourFunctionCall();
    });

а также вы можете связать свою страницу с идентификатором страницы, но страница init вызывается только один раз при вставке вашей страницы в DOM. http://jquerymobile.com/test/docs/api/events.html

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });

Ответ 5

Проверьте этот код:

$( document ).delegate("#pageid", "pageinit", function() {  
    console.log('PAGEINIT');    
});

Ответ 6

Следующее работает отлично

<div data-role="page" id="signupForm">
    ...
    ...
<script type="text/javascript" src="test.js"></script>
</div>

test.js может содержать следующий код

// test.js starts here

$('#signupForm').on('pageinit', function(){
    // your code goes here
    ...
    ...

 });
// test.js ends here

В вашей форме входа у вас может быть ссылка для signupForm и data-ajax = "false" должен быть включен в тег href, который ссылается на signupForm.

Счастливое кодирование

Kuppuram

Ответ 7

Если это ajax-запрос на эту страницу, script должен быть записан в тело, иначе он вообще не работает для ajax.

<!DOCTYPE html>
<html>
  <head>
..........
  </head>
  <body>
    <div data-role="page" data-control-title="Detail" id="self_edit_page" data-theme="e">
...........
  </div>
  <script type="text/javascript" language="javascript" >
  $('#self_edit_page').bind("pagebeforeshow",function(event)
.......
  </script>
   </div>
  </body>
</html>