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

Question

我正在使用jQuery将函数附加到整个类的单击事件中。例如：

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

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

Answer 1

是的，你做什么，除非你使用一个delegate event

这样的：

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

ondocs：

如果选择省略或为空，事件处理程序被称为直接或直接绑定。每次在选定元素上发生事件时，都会调用处理程序，无论它是直接发生在元素还是来自后代（内部）元素的气泡。

当提供选择器时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不会调用该处理程序，而只会为与选择器匹配的后代（内部元素）调用该处理程序。 jQuery将事件从事件目标引发到处理程序所附的元素（即，最内层到最外层的元素），并沿着匹配选择器的路径上的任何元素运行处理程序。

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

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

---

只是因为这里太多人建议你应该使用live，live由on因为1.7版本过时，通过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+ 

Answer 2

这1.4.3版本取而代之的将事件绑定所有新实例

$('.clickDiv').live('click', function() { 
    $(this).hide(); 
}); 

http://api.jquery.com/live/

Answer 3

I am attaching an event like : 

$('body').on('click', 'button[data-tracking], a[data-tracking]', 

       function(event) { console.log($(event.target)); 
}); 

and want to get to the target of element which is set up as : 
    <pre> <[]a data-tracking="hello" href="hello"> 
    \<\span\>test now\<\/span\> 
    \<\/a\> 
</pre> 
it does work perfectly, but event.target gives me "span" element but what i want is "a" element so that I could get to value of data-tracking attribute.