Question

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

我在外部JS文件中设置为一系列if语句的每个页面都有特定于页面的JS - 如果目标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   

});

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

Answer 1

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

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

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

如果您不知道要使用的页面事件，请始终使用 pagebeforeshow 。

要了解有关网页事件及其工作原理的更多信息，请查看 ARTICLE 或找到 HERE 。

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

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

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

$(document).on('pagebeforeshow', '#page-id', function (e) {

jQuery Mobile - 页面特定的JS仅在页面加载后加载一次，而不是每次加载页面时加载

1 个答案: