2

我正在创建一个 jQuery Mobile Web 应用程序，它会加载一些页面。

例如，a.html是我的主页。它可能会调用b1.html, b2.html,..., b100.html（用户可以点击其中一个按钮）。（页面加载了 jQuery Mobile 的 ajax 导航功能）

并且每一页都有一些事件，每一b[i].html页ids和很多东西都是一样的b[i].html。但关键是，在任何时候，只有其中一个可能在 DOM 中。所以不会有id冲突之类的。

问题

问题是事件的冲突。当用户返回a.htmlfromb[i].html时，HTML 将被删除，但事件将保留。如果我先去b[i].html，然后再回来a.html再去，这会引起很多问题b[j].html。我的意思是，b[j].html将无法正常工作... :(

我试过的

我已将其放入a.html，以删除所有事件：

$("#mainpage").off("pagebeforeshow").on("pagebeforeshow",function() {
    $("*").not("#mainpage").off();
    //Other initialization codes...
});

但是，问题没有解决...

（mainpage是 的data-role="page"id a.html）

例子

例如，我在每个中都有这个b[i].html：

$(window).resize(function () {
    alert("Resized");
});

在开始时（在a.html），如果我调整窗口大小，将没有警报，但是在访问b[i].html然后返回之后a.html，如果我调整窗口大小，我会看到警报，即使使用那行代码（我已经尝试过部分。）...

a.html那么，当用户返回from时，如何删除这些事件处理程序b[i].html？

4

1 回答 1

3

如果你使用 jQuery Mobile，dom 中可能同时存在多个上述页面，导致非唯一 id 冲突。

我会放弃将 js 放在单个页面上，而是从主页或通过脚本加载系统（如 require.js）完成。然后通过文档中的委派完成所有事件。显然，这不适用于 window.resize()，但无论如何都不需要委托。

“你能再解释一下吗？”

基本上，如果您在子页面上包含脚本，则需要对每个页面进行设置和拆卸。setup 添加事件，而 teardown 删除它们。如果您改为使用单个全局脚本，该脚本使用文档中的事件委托添加所有事件，则所有页面都应该工作。显然，全局脚本在复杂站点上可能会变得非常大，因此您可以改为使用 require.js 来加载根据需要执行相同操作的 js，从而防止它多次加载相同的依赖项。

至于删除所有事件，我从未尝试过，但你可以使用$("*").off()吗？根据文档，它应该可以工作。我不确定它将如何影响 jQuery 移动。要删除文档和/或窗口上的事件，您必须手动执行，因为$("*")不会选择它们。

$(document).on("vmousemove","#link",func)是您从文档中委派事件的方式。

于 2012-09-11T21:41:00.483 回答