Question

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

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中的某些元素？

寻求帮助

Answer 1

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

所以试试

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

Answer 2

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

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

你可以使用类似的东西：

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

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

随着时间的推移jQuery触发事件堆栈

2 个答案: