javascript - jQuery 事件不适用于动态获取的 HTML

Question

假设我想在单击具有“data-change”属性的所有 span 标签时更改它们的 innerHTML:

$('span[data-change]').click(function(){
 $(this).text('Text was changed dynamically');
});

现在，如果我使用 javascript 上的 jQuery 在我的 html 文档中添加一个具有数据更改属性的新 span 标记，则 onclick 事件将不会对新添加的 span 标记起作用。为什么？我怎样才能让他们工作？谢谢!

Answer 1

在为动态元素注册事件时，您需要使用事件委托(delegate)。

您可以使用 .on()注册委托(delegate)事件。

$(document).on('click', 'span[data-change]', function(){
    $(this).text('Text was changed dynamically');
});

您还可以阅读 this