jQuery 触发事件随时间堆栈答案

【问题标题】：jQuery trigger events stack over timejQuery 触发事件随时间堆栈
【发布时间】：2013-09-26 12:56:33
【问题描述】：

我有一个关于定义客户事件和触发器的一般问题：

jQuery(document).on('btn.hover', function () {
    jQuery('.orange_bubble').hover(function () {
        jQuery(this).addClass('hover');
    }, function () {
        jQuery(this).removeClass('hover');
    });
});

现在我可以调用触发事件来触发该事件一次。

jQuery(document).trigger('btn.hover');

如果我通过 ajax 或通过 js 生成内容，我需要在新元素上重新绑定事件：

所以我再次触发它：

$.ajax{
   bla
   success: {
      jQuery(document).trigger('btn.hover');
    }
}

如何在不堆叠事件的情况下做到这一点。我现在有这个问题。我正在使用一些客户事件，有时他们必须重新启动所有元素，但只是一次而不是堆叠。

一次触发事件的最佳实践是什么？如果它们被设置为 dom 中的某些元素？

谢谢帮助

【问题讨论】：

标签： javascript triggers stack jquery

【解决方案1】：

.hover() 是使用mouseenter 和mouseleave 事件的快捷方式，但一个缺点是它不能用于注册委托处理程序，因此不要使用.hover()，而是直接使用事件。

所以试试

jQuery(document).on({
    mouseenter: function () {
        jQuery(this).addClass('hover');
    },
    mouseleave: function () {
        jQuery(this).removeClass('hover');
    }
}, '.orange_bubble')

【讨论】：

你的回答太棒了，我为此写了一些触发器，效果很好！

【解决方案2】：

首先，如果您使用事件委托，则不必将事件重新绑定到新添加的元素。来自JQuery page

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择一个在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要

你可以使用类似的东西：

$( "//container of .orange_bubble elements" ).on( "hover", ".orange_bubble", function() {
  //your content
});

这也将阻止您“堆叠”事件

【讨论】：