2

我有两页以单页模板方式编写。

Login.html 有<script src="login.js" />他的<head></head>，这就像：

$(document).on("pageinit", "#loginPage", function(){
   $("#loginBtn").on("tap", function(){
      // if you are already authenticate or login success...
      $.mobile.changePage("Main.html");
   });
});

Main.html<script src="main.js" />在他的文件<div data-role="page" id="main"></div>中，就像：

$(document).on("pageinit", "#main", function(){
//if not authenticated go to login
   $.mobile.changePage("Login.html");

    callJsonService();

$("#btnLogout").on("tap", function(){
            //do logout operatio and go back to login
    $.mobile.changePage("Login.html");
}).on("vmousedown", function(){
    $(this).addClass("tapped");
}).on("vmouseup", function(){
    $(this).removeClass("tapped");
});

如果您来回导航这 2 个页面，则每次访问该页面时，绑定的事件都会on()触发两次，然后是 3 次，然后是 4 次等等。

为什么会这样？是因为“pageinit”事件吗？或者将 main.js 放在带有 data-role=page 的 div 中是不正确的？

4

2 回答 2

1

不要在您的内部加载 JS，<div data-role="page"/>它会触发多次，我喜欢将on侦听器绑定到我包含在每个页面上的 js 文件中的文档根目录

$(document).on('pageinit pageshow', 'div:jqmData(role="page"),   
div:jqmData(role="dialog")', function(event){

现在放置某种数据变量或类<div data-role="page" data-pageid="foo"/>来区分不同的页面，现在你有两个变量来分支你的代码

  1. event.type = pageinit/pageshow：第一个只为每个页面触发一次，后者将在第一次加载时触发，如果您按下返回并导航回页面，则会重新触发

  2. $(this).data('pageid') = 任何你想要的，在这种情况下，当页面foo触发任一事件时，你可以适当地处理，这并不奇怪

有关更多详细信息，请参阅我的旧答案：https ://stackoverflow.com/a/10542821/737023

于 2012-11-06T23:56:28.560 回答
0

您在这里似乎有一些不一致之处。使用 SPA 模板并加载多个物理页面会导致逻辑页面（包含在您的<div data-role="page"></div>标签中）通过 ajax 加载并添加到 DOM。通过在这些逻辑页面中放置脚本标签，脚​​本会触发多次（每次页面加载一次）并导致您的多个事件绑定。

您应该将所有脚本放在逻辑页面之外。一个好的地方是在您的初始页面（main.html）的标题中。

于 2012-11-06T17:49:53.763 回答