Question

假设我想在点击具有“数据更改”属性的所有span标记时更改innerHTML：

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

现在，如果我在javascript上使用jQuery在html文档中添加一个带有data-change属性的新span标记，onclick事件将无法在新添加的span标记上运行。为什么？我怎样才能让它们发挥作用？谢谢！

Answer 1

在为动态元素注册事件时，您需要使用事件委派。

您可以使用.on()注册委派活动。

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

您还可以阅读this

Answer 2

您必须使用委托来动态创建元素，如下所示：

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

jQuery .on() API页面包含更多详细信息和示例。

Answer 3

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

或

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

更多信息