1

我正在使用jQuery Mobile 创建一个应用程序，其中一个导航位于它所控制的页面之外（即导航不在每个页面内复制，只有一个在容器外的实例）。这些页面以“通常”的 data-role = "page1" 传递，其中 data-role = "button" 链接链接到页面 ID。

对于外部 JS 文件中的每个页面，我都有特定于页面的 JS，这些页面设置为一系列 if 语句 - 如果目标 id 是 page1，则运行代码，如果目标 id 是 page2，则运行该代码等。

如果所有页面只加载一次，它就可以完美运行，但是如果我重新加载页面（通过导航点击返回页面），代码不会从一开始就再次触发；它仍然与JS第一次在该页面上完成运行时的状态相同（JS正在控制每个页面上的动画）。

我将整个 JS 绑定到页面，但是我需要将每个页面的 JS 绑定到它的页面吗？我试图研究这个是徒劳的 - 我刚刚开始在 jQ M.

这是我的 JS：

$(document).bind('pagecreate', function (e) {
if (e.target.id == 'one') {

    $('#div-one').animate({marginLeft:"500px"});

}

if (e.target.id == 'two') {

    //Perform jQuery .animate function  

}

if (e.target.id == 'three') {

//Perform jQuery .animate function

}

    //etc   

});

任何帮助或建议将不胜感激！

4

1 回答 1

3

在您的示例pagecreate中，第一次创建页面时，事件只会触发一次。

所以将其更改为pagebeforeshow事件，如下所示：

$(document).bind('pagebeforeshow', function (e) {

如果您不知道要使用什么页面事件，请始终使用pagebeforeshow.

要了解有关页面事件及其工作原理的更多信息，请查看这篇文章或在此处找到它。

还有一件事，这不是错误，但bind(..已被弃用，切换到on(...事件绑定：

$(document).on('pagebeforeshow', '[data-role="page"]', function (e) {

或者如果您想定位特定页面：

$(document).on('pagebeforeshow', '#page-id', function (e) {
于 2013-03-14T11:23:59.310 回答