附加事件处理程序与类选择器是否会影响该类的动态添加元素？

Question

我正在使用jQuery将函数附加到整个类的click事件.例如:

$(".clickDiv").click(function(){
   $(this).hide();
});

在我的客户端javascript上,我.clickDiv动态创建了更多实例.
我是否需要$(".clickDiv).click(function...)再次调用,或者新实例是否会自动将该函数绑定到click事件？

Answer 1

是的,除非你使用了 delegate event

像这样:

$('#container').on('click', '.clickDiv',  function() {
   $(this).hide();
});

on docs:

如果省略selector或为null,则事件处理程序称为直接或直接绑定.每次在所选元素上发生事件时都会调用该处理程序,无论它是直接发生在元素上还是来自后代(内部)元素的气泡.

提供选择器时,事件处理程序称为委托.当事件直接发生在绑定元素上时,不会调用处理程序,但仅适用于与选择器匹配的后代(内部元素).jQuery将事件从事件目标起泡到附加处理程序的元素(即最里面到最外层的元素),并为匹配选择器的路径上的任何元素运行处理程序.

事件处理程序仅绑定到当前选定的元素; 它们必须存在于您的代码调用.on()时的页面上.要确保元素存在且可以选择,请在文档就绪处理程序内对页面上HTML标记中的元素执行事件绑定.如果将新HTML注入页面,请在将新HTML放入页面后选择元素并附加事件处理程序.或者,使用委托事件来附加事件处理程序,如下所述.

委托事件的优点是,它们可以处理来自稍后添加到文档的后代元素的事件.通过选择在附加委托事件处理程序时保证存在的元素,您可以使用委派事件来避免频繁附加和删除事件处理程序的需要.例如,此元素可以是模型 - 视图 - 控制器设计中视图的容器元素,如果事件处理程序想要监视文档中的所有冒泡事件,则可以是文档.在加载任何其他HTML之前,文档元素在文档的头部可用,因此可以安全地将事件附加到那里而无需等待文档准备就绪.

只是因为这里太多人建议,你应该使用live,live是因为版本弃用1.7通过on和版本被替换1.4.3由delegate

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+