删除所有 jQuery 事件处理程序

Question

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

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

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

问题

问题是事件的冲突。当用户从b[i].html回到a.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是a.html的data-role="page"的id）

示例

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

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

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

---

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

Answer 1

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

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

“你能解释一下吗？”

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

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

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