2

在我的 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 无法正确加载，我可以看到页面视觉加载正常但是在萤火虫上，我看到标签内的一些必要的javascript不再命中，它再也不会在menu.html上的任何地方命中任何javascript，只需从缓存中加载以前的html就可以了。menu.html 的页面标题也没有正确更改，并且在那之后保持为“帮助”。

我的完整 menu.html 看起来像这样；

http://jsfiddle.net/M5CYZ/

有任何想法吗？

4

2 回答 2

2

这是一个疯狂的猜测，但根据您的代码，这是正常行为。

jQuery Moible 事件 pageinit 只会在初始页面加载期间触发一次，除非页面被刷新（手动，使用 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');
});
于 2013-04-05T13:58:34.273 回答
2

这样做。

给返回按钮一个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 
 }); 
});
于 2013-04-05T14:59:54.293 回答