.on()。off()事件冒泡问题(如此困惑......)

时间:2014-04-10 23:09:58

标签: javascript jquery ajax events event-propagation

首先让我说这给我带来了几个小时的痛苦,我已经尽力找到资源并理解为什么会这样。

  1. 我有一个可以解决AJAX问题的文件浏览器。
  2. 当我加载新目录时,我必须重新初始化事件处理程序
  3. 当我更改目录时,它会堆叠。
  4. 因此,如果我说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);
    

2 个答案:

答案 0 :(得分:1)

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

  1. 您只能重新启动新加载的HTML,这样您就无法在现有内容上获得任何双重事件处理程序。执行此操作的常用方法是通过将选择器放在选择器的开头或将其作为上下文传递(第2个选项器),将选择器作为新内容的新内容添加到新内容的范围内。参数)。

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

  3. 对于委派事件处理,您将使用此表单的事件处理程序:

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

    静态父选择器不需要自动动态加载,动态内容需要是它的子级。您甚至可以将$(document)用于静态父级,但更好(为了提高事件路由效率)选择更接近动态内容的父级。

    以下是有关委派事件处理的一些受欢迎的参考资料:

    jQuery .live() vs .on() method for adding a click event after loading dynamic html

    Does jQuery.on() work for elements that are added after the event handler is created?

    Should all jquery events be bound to $(document)?

    JQuery Event Handlers - What's the "Best" method


    为了仅重新启动新加载的HTML,您可以在选择器前面添加新加载内容的父级:

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

    或者,像这样:

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

答案 1 :(得分:0)

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

代码会有所帮助,可能就是您设置on()off()的位置以及一些基本的html结构。

使用示例:

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

});

这会收听a#parent元素的所有点击。