jQuery Mobile: javascript прерывается, когда после загрузки страницы из ajax

Question

Итак, я решил использовать инфраструктуру jQuery Mobile для создания моего нового мобильного сайта. У этой функции есть возможность загрузки любой локальной ссылки href с помощью ajax, что отлично. Но новая загружаемая страница не отвечает ни на один из javascript. У меня есть домашняя страница и страница 2, оба из которых имеют один и тот же html-макет, который содержит несколько изменений в содержании, я приведу пример.

Я создал меню навигации, которое перемещается слева и толкает основное содержимое вправо. Когда я нажимаю ссылку на страницу, она загружает новую страницу через ajax, но затем на новую страницу, если я нажимаю кнопку меню, jQuery не выбирает это, и поэтому ничего не происходит (меню не выйдет).

$(document).ready(function() { 
$(".menu-trigger").click(function() { 
    console.log("1") 
    if ($('nav').hasClass('navTransform')) { 
     console.log("2") 
    $('nav').removeClass('navTransform'); 
    $('article').removeClass('articleTransform'); 
    } 
    else { 
     console.log("3") 
    $('nav').addClass('navTransform'); 
    $('article').addClass('articleTransform'); 
    } 
}); 
}); 

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

Answer 1

Обходным путем для этого является использование соответствующего обработчика jQM pageinit() вместо обработчика jQuery.

pageinit = DOM ready

Одна из первых вещей, которые люди учатся в JQuery, чтобы использовать функцию $ (документ) .ready() для выполнения DOM-специфичный код, как только как DOM готов (что часто происходит задолго до события onload). Однако на сайте и приложениях jQuery Mobile запрашиваются страницы, а вводится в ту же DOM, что и пользователь, поэтому событие DOM ready не так полезно, поскольку оно выполняется только для первой страницы. К выполнять код при загрузке и создании новой страницы в jQuery Mobile, вы можете привязываться к событию pageinit.

Итак, ваш код может выглядеть следующим образом:

$(document).on("pageinit", "#page1", function(){ 
    //Your init code for page 1 goes here 
}); 

$(document).on("pageinit", "#page2", function(){ 
    //Your init code for page 2 goes here 
});