在 jQuery 移动单页模板中放置脚本标签的位置
Posted
技术标签:
【中文标题】在 jQuery 移动单页模板中放置脚本标签的位置【英文标题】：Where to put script tag inside jQuery mobile single page template 【发布时间】：2012-11-06 17:09:47 【问题描述】：我有两个页面以单页模板的方式编写。
Login.html 在他的<head></head> 中有<script src="login.js" />，这就像：
$(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 里面不正确？
【问题讨论】：
【参考方案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://***.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(您似乎在这里有一些不一致之处。使用 SPA 模板并加载多个物理页面会导致逻辑页面（包含在您的 <div data-role="page"></div> 标记中）通过 ajax 加载并添加到 DOM。通过在这些逻辑页面中放置脚本标签，脚本会触发多次（每次页面加载一次）并导致您的多个事件绑定。
您应该将所有脚本放在逻辑页面之外。一个好地方是在您的初始页面 (main.html) 的标题中。
【讨论】：
以上是关于在 jQuery 移动单页模板中放置脚本标签的位置的主要内容，如果未能解决你的问题，请参考以下文章