jQuery，单击事件不会触发

Question

我的问题是（因为我解决了它，但我不知道它为什么起作用）：我的DOM有两个具有相同CSS类的'span'标签。 通过 AJAX 请求添加了一个 span。 我试图使用以下方法在它们上触发点击事件：

$('.css class').on('click', function ...

但是第二个添加的'span'标签（AJAX）没有产生点击事件。 当我将上面的行更改为：

jQuery('body').on('click', '.css class', function(e){...

一切都开始正常工作。 我不知道为什么。

Answer 1

使用事件委托：

$('body').on('click','.css-class',function(){
 // your code goes here.
});

记住课堂上不要有空格。 否则，您将定位在.css下的<class>

在（）

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

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

阅读更多