使用特定类向当前和未来元素添加事件侦听器

Question

使用JQuery,是否可以向当前或将来具有特定类的任何元素添加事件侦听器？

我正在开发一个大量使用contentEditable的项目,因此DOM正在发生变化,元素可以通过用户输入添加和删除类.

我希望能够说"类X的元素在点击时应该做Y",但是如果我理解正确的话,$(".X").click(Y)只会将事件监听器添加到当前有类的元素X.

此外,如果一个元素不再是X类的一部分,那么它仍然会有click事件监听器.

我怎样才能做到这一点？

Answer 1

是的.您所谈论的内容称为事件委派.这是一个例子:

$('#container').on('click', '.innerElement', function(){
   /// Do stuff
});

在您的情况下,#container将是一个已知存在于页面加载上的元素,它将包含您关心的子元素(无论是现在还是将来).这种方法利用了DOM中的事件冒泡.

正如另一张海报所提到的那样,live方法也可以运行 - 但它在jQuery 1.7中已被弃用,并且通常不如使用更多选择性委托(例如上面的示例)那样高效.

Answer 2

你会想要使用事件委托。jquery 1.7 比以前的版本更抽象，但它看起来像这样：

$("#myWrappingElement").on("click", ".myclass", function(event){
    alert($(this).text());
});

这基本上向#myWrappingElement 元素添加了一个单击事件侦听器，jquery 将自动查看原始事件目标是什么并触发正确的函数。这意味着您可以添加或删除 .myclass 元素，并且仍然可以触发事件。