.on(）.of(）事件冒泡问题(太混乱了..）

.on() .off() event bubbling issue (so confused...)

本文关键字：混乱 乱了 问题 of 事件 on      更新时间：2023-09-26

首先让我说，这给我带来了数小时的痛苦，我已经尽力寻找资源并理解为什么会发生这种情况。

  1. 我有一个可以使用AJAX的文件浏览器
  2. 当我加载一个新目录时，我必须重新初始化事件处理程序
  3. 当我更改目录时，它会堆叠

所以，如果我说files/../files/..回到根（两次），它会激发4次。

我尝试过用.off()解除绑定，用.one()限制，用$(document).find('*').off()重置所有绑定，用特定事件，我尝试过e.stopPropagation();。

似乎什么都不管用。这把我逼疯了。如果我不重新初始化系统，那么通过AJAX加载的新内容将不会收到绑定。如果我这样做，它就会堆积起来。请帮忙！

//previous method
file.on('click',dothis);
//method that actually works
files.on('click','a',dothis);

与其试图清除所有事件处理程序，然后重新安装所有程序，不如用两种更干净的方法来解决问题：

  1. 您只能重新初始化新加载的HTML，这样就不会在现有内容上获得任何双重事件处理程序。通常的方法是将选择器的选择器放在选择器的开头或将其作为上下文（第二个参数）传递，从而将用于向新内容添加事件处理程序的选择器的范围扩展到新内容的父对象。

  2. 您可以在静态通用父级上切换为使用委派的事件处理程序，这样您就不必重新初始化事件处理程序，即使是动态内容。

对于委托事件处理，您将使用以下形式的事件处理程序：

$("some static parent selector").on("click", "child object selector", fn);

静态父选择器本身不需要动态加载，动态内容需要是它的子级。您甚至可以对静态父级使用$(document)，但（为了事件路由的效率）选择更接近动态内容的父级更好。

以下是一些关于委托事件处理的流行参考：

jQuery.live（）与.on（）方法在加载动态html 后添加点击事件

jQuery.on（）是否适用于创建事件处理程序后添加的元素？

是否应该将所有jquery事件绑定到$（文档）？

JQuery事件处理程序-What'；s是"；最佳"；方法

为了只重新初始化新加载的HTML，您只需在选择器前面加上新加载内容的父级：

$("#parentOfDynamicContent .myAnchors").on("click", fn);

或者，像这样：

$("#parentOfDynamicContent").find(".myAnchors").on("click", fn);

您确定要在插入的元素父级上设置.on()吗？on()不会监听在设置之前插入的元素，您需要将其设置为DOM父级。

代码会有所帮助，也许只是在设置on()和off()以及一些基本的html结构的地方。

示例用法：

$('#parent').on('click', 'a', function(e) {
});

这将监听#parent内a元素上的所有点击。

相关文章：