（）上的jQuery不起作用

Question

我在我的网站上动态生成按钮。要检测这些元素的click状态，我相信你需要使用jQuery的on()。我尝试了以下但它似乎不起作用。我做错了吗？

$('.press').on('click', function() {
    alert('clicked'); //Does not trigger on dynamic elements
});

当您查看我的JSFiddle时，请注意单击动态生成的按钮不会产生结果。

Answer 1

当您想要委托事件处理时，选择器会继续使用包含动态元素的元素（一直到document），以及{{的第二个参数1}}是选择器：see documentation

.on

我建议在使用委托时尝试使用尽可能特定的选择器，以便需要最少量的遍历。但它通常不会产生很大的不同。

Answer 2

对于动态生成的元素，您需要使用事件委派。需要将.on（）应用于父元素以执行委派

Answer 3

委派活动

$('body').on('click','.press', function() {
    alert('clicked'); // now it triggers on dynamic elements
});

您可以使用static parent container ..

替换正文

当您附加活动时，您的方法无效，因为元素仍为not available in the DOM。

<强> Check Fiddle

Answer 4

应该是

$(document).on('click', ".press", function() {
    alert('clicked'); 
});

$('.press')找到当前文档中的所有元素并将事件绑定在它们上，因此它不适用于您稍后添加的元素，因为它们在被选中时不存在。

$(document)选择document，它始终存在于任何地方和任何地方，并将事件绑定到它。然后它会过滤.press，这样只有匹配.press的元素才能实际调用回调。

请注意，您应该选择一个父元素，该元素是.press元素的公共父元素，并且当时存在，而不是使用document。