在 jQuery 移动单页模板中放置脚本标签的位置答案

【问题标题】：Where to put script tag inside jQuery mobile single page template在 jQuery 移动单页模板中放置脚本标签的位置
【发布时间】：2012-11-06 17:09:47
【问题描述】：

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

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

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

$(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");
});

如果您前后导航这两个页面，每次访问该页面时，与on() 绑定的事件都会被触发两次，然后是三次，然后是四次等等。

为什么会这样？是因为“pageinit”事件吗？还是把 main.js 放在 data-role=page 的 div 里面不正确？

【问题讨论】：

标签： jquery jquery-mobile ibm-mobilefirst jquery-events

【解决方案1】：

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

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

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

event.type = pageinit/pageshow：第一个仅针对每个触发一次页面，后者将在第一次加载时触发，如果您按回则重新触发并导航回页面
$(this).data('pageid') = 任何你想要的，在这种情况下，当页面 foo 触发你可以适当处理的任一事件时，没有惊喜

查看我的旧答案：https://stackoverflow.com/a/10542821/737023 了解更多详情

【讨论】：

感谢您的回复，我真的很感兴趣。但我看不清楚：我只需要放1个绑定pageinit和pageshow的js文件吗？在这个文件中我必须区分页面吗？我必须区分pageinit和pageshow吗？那么我必须在哪里绑定到像点击这样的事件？
是的，在一个文件中，您可以通过检查传入的event.type 来检查它是否为pageinit/pageshow，并且您可以将数据变量附加到页面，例如：<div data-role="page" data-pageid="myFirstPage">now in上面代码的回调有三个主要变量，this = 当前执行的页面，这是你添加任何绑定的地方，当event.type 是 pageinit 和 .data('pageid') === 'myFirstPage' 时添加绑定，因为 pageshow触发不止一次，你只需要绑定一次。
如果你有更多的代码，你最终希望拥有多个 JS 文件，一切都应该从 pageinit/pageshow 回调处理程序开始。你调用的其他JS文件中绝对可以有其他函数。
由于回调处理程序中的this 指的是调用页面，因此您还应该为要与之交互的元素执行$(this).find(，这是因为jQM“可能”将多个页面附加到单个页面中DOM - 如果您做了类似$('.myHeaderClass') 的操作，您可能会无意中选择非活动页面中的元素。
好的，它通过加载主页中的所有 javascript 来工作，该主页是通过 HTTP 访问的。但我想知道如果我有很多 js 文件，我可以使用 $.load() 来注入脚本吗？因为如果我将它放入具有不同页面的 data-role="page" 的 div 中，这会导致事件处理程序的总和，所以如果我点击一次发泄被触发多次（与我访问页面一样多） .

【解决方案2】：

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

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

【讨论】：