Вопрос по jquery, jquery-mobile – jQuery Mobile pageinit / pagecreate не запускается

18

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

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

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

Эта проблема:

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

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

Обновить:

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

<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');
});

Как я могу использовать Pagechange, чтобы всегда вызыватьpageinit а такжеpagecreate

OnBack не запускается, потому что ваша страница находится в DOM. Попробуйте отключить ajax в jQuery mobile. Или, если хорошо, то вместо 5 разных страниц, попробуйтеdata-role = page за это. Это работает так же, как то, что вы ищете. Hamza Waqas

Ваш Ответ

7   ответов
0

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

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

Вы проверяете на неправильные события, pageinit и pagehow - вот что вас должно беспокоить.

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

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

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

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

  1. bind a live event to all pages/dialogs pageinit and pageshow events in some include that is on every page:

    $(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

  2. I reference each page with a name: <div data-role="page" data-mypage="employeelist"> In this live event you can basically have a switch statement for each page "name", and then check event.type for pageinit/pageshow or both and put your code there, then every time a page is created/shown this event will be fired, it knows what page triggered it and then calls the corresponding code

  3. Now no matter what entry point a user lands on your site, all the handlers for all the pages are loaded. As you may already know, when you navigate to a page, it only pulls in <script/> within the div[data-role="page"] - ignoring any JS in the <head/>, placing separate JS on each page is a mess and should be avoided in any large site I believe

  4. Try not to use blanket selectors in your jQuery, e.g. $('div.myClass') since this will search all of your DOM which may have more than one jQM page in it. Luckily in the live event handler for pageinit/pageshow mentioned above, this refers to the current page. So do all DOM searches within it, e.g. $(this).find('div.myClass') this ensures you are only grabbing elements within the current page. (of course this isn't a concern for ids). Note in the pageshow event you can also use $.mobile.activePage, but this isn't available in the pageinit, so I don't use it for consistency


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

Недостатком является то, что все ваши js для всего вашего сайта загружаются на первой странице, которую достигает пользователь, но минимизированный даже большой сайт меньше, чем jQuery или jQM, так что это не должно вызывать беспокойства.But if your site really is large I suppose you could look into RequireJS.

Преимущество в том, что вы больше не загружаете все свои JS для каждой страницы через AJAX каждый раз, когда пользователь переходит на новую страницу.If all your JS is available on entry, you can now put debugger statements and debug much more easily!

Error: User Rate Limit Exceededapi.jquerymobile.com/pageinitError: User Rate Limit Exceeded
pagecreateError: User Rate Limit ExceededpageinitError: User Rate Limit ExceededpagecreateError: User Rate Limit ExceededpageinitError: User Rate Limit Exceededjquerymobile.com/demos/1.1.0/docs/api/events.htmlError: User Rate Limit ExceededpageshowError: User Rate Limit ExceededpageinitError: User Rate Limit Exceeded
0

Если это ajax-запрос к этой странице, сценарий должен быть записан в тело, иначе он не будет работать вообще для 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>
Error: User Rate Limit Exceeded
3

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

Вы можете посмотреть вpagechange событиеhttp://jquerymobile.com/test/docs/api/events.html

1

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

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

pageinit

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

.

pageshow

Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it: prevPage (object) A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.

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

0

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

<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

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

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

Kuppuram

0

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

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

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

  $("#YourPageID").on('pageinit', function() {
        //YourFunctionCall();
    });
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded.live()Error: User Rate Limit Exceededapi.jquery.com/live

Похожие вопросы