Question

我正在创建一个jQuery Mobile网络应用程序，它可以加载一些页面。

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

每个b[i].html页面中都有一些事件，id个，每个b[i].html页面中的内容都相同。但问题是，在任何时候，其中只有一个可能在DOM中。因此，不存在id个冲突等。

问题

问题是事件的冲突。当用户从a.html返回b[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"）

的a.html的ID

实施例

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

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

一开始（在a.html中），如果我调整窗口大小，则不会显示任何提醒，但在访问b[i].html然后返回a.html后，我会看到如果我调整窗口大小，即使使用那行代码（我尝试过的部分），也会发出警报。...

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

Answer 1

如果您使用的是jQuery Mobile，则dom中可能同时存在多个所述页面，从而导致非唯一ID冲突。

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

“你能解释一下吗？”

基本上，如果您在子页面上包含脚本，则需要为每个页面同时设置和拆卸。安装程序添加事件，拆除它们。如果您改为使用单个全局脚本，该脚本使用文档中的事件委派添加所有事件，则所有页面都应该起作用。显然，全局脚本在复杂的站点上可能会变得非常大，所以你可以使用require.js加载js，它们可以根据需要加载相同的东西，防止它多次加载相同的依赖项。

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

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

删除所有jQuery事件处理程序

问题

我尝试了什么

实施例

1 个答案: