0

First let me say this has caused me hours of agony, and I've tried my best to find resources and grasp why this is happening.

  1. I have a file browser that works off AJAX.
  2. When I load a new directory, I have to re-initialize event handlers
  3. When I change directories, it stacks.

So if I go to say files/../files/.. to get back to the root (twice), it fires 4 times.

I have tried unbinding with .off(), I've tried restricting with .one(), I've tried resetting ALL binds with $(document).find('*').off() and with specific events, I have tried e.stopPropagation();.

Nothing seems to work. This is driving me nuts. If I don't re-initialize the system, the new content loaded via AJAX does not receive the binds. If I do, it stacks. Please help!

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

2 回答 2

1

与其尝试清除所有事件处理程序然后重新安装所有内容，还有两种更简洁的方法可以解决您的问题：

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

  2. 您可以切换到在静态、公共父级上使用委托事件处理程序，因此您根本不必重新初始化事件处理程序，即使对于动态内容也是如此。

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

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

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

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

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

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

所有 jquery 事件都应该绑定到 $(document) 吗？

JQuery 事件处理程序 - 什么是“最佳”方法

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

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

或者，像这样：

$("#parentOfDynamicContent").find(".myAnchors").on("click", fn);
于 2014-04-10T23:15:01.867 回答
0

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

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

示例用法：

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

});

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

于 2014-04-10T23:15:05.660 回答