Кнопка jQuery назад не работает должным образом после обновления

Question

В моем мобильном приложении jQuery;

На menu.html и внутри тела Я делаю что-то подобное, чтобы пойти help.html;

.... 

$(document).off('pageinit', '#menupage').on('pageinit', '#menupage', function() { 

    $(document).off('click', '#help').on('click', '#help', function(){ 
      $.mobile.changePage("help.html", { 
       reloadPage: true, 
       transition: "flip", 
       reverse: false 
      }); 
     }); 
} 

.... 

<li><a id="help" href="#" role="link" data-role="none"> 
         <div class="img help"></div> 
         <div class="menuTitle langMenuItem3">Help</div> 
         <div class="arrow"></div> 
</a></li> 

Затем на странице help.html У меня есть кнопка назад, как это, чтобы вернуться к menu.html:

<header data-role="header"> 
    <a href="#" data-rel="back" class="button" data-role="none"> 
     <div class="arrow_reverse"></div><span class="langBack">Terug</span> 
    </a> 
    <div class="pageTitle">Over deze app</div> 
</header> 

Моя проблема в том, что это работает в нормальных условиях, НО если я сделайте обновите на menu.html, затем перейдите на help.html , а затем снова вернитесь в меню, menu.html не загружается должным образом, я вижу, что страница визуально загружена нормально, но на firebug. Я вижу, что некоторые необходимые javascripts внутри тегов больше не попадает, он никогда не ударяет ny javascripts в любом месте menu.html, просто загружает предыдущий html из кеша, который все. Также заголовок страницы menu.html не изменяется корректно и остается после этого «Справка».

мое полное menu.html выглядит так;

http://jsfiddle.net/M5CYZ/

Любые идеи?

Answer 1

сделать это таким образом.

Верните кнопку в ID

<a href="#" id="backbtn" class="button"> 
<div class="arrow_reverse"></div><span class="langBack">Terug</span> 
</a> 

, а затем добавьте следующий код в help.html

$('#backbutton').off('click').on('click', function() { 
$.mobile.changePage("menu.html", { 
    reloadPage: true, 
    transition: "flip", 
    reverse: true 
}); 
}); 

Answer 2

Это дикое предположение, но в соответствии с вашим кодом это нормальное поведение.

Событие jQuery Мое событие eventinit будет запускаться только один раз во время начальной загрузки страницы, и если страница не обновляется (вручную, с rel = "external" или в вашем случае reloadPage = "true"), она больше не будет запускаться.

Если вы хотите, чтобы javascript выполнялся снова при каждой посещаемой странице, используйте вместо этого событие pagebeforeshow. Как видно из примера, удаление pageinit и добавление его обратно вам не помогут.

Если вы хотите узнать больше, читайте мой другой ответ/статью о странице события: jQuery Mobile: document ready vs page events

А вот пример, чтобы доказать свою точку зрения: http://jsfiddle.net/Gajotres/Q3Usv/

$(document).on('pageinit', '#index', function(){  
    alert('Pageinit'); 
}); 

$(document).on('pagebeforeshow', '#index', function(){  
    alert('Pagebeforeshow'); 
});