Question

如何为新创建的DOM元素运行jQuery脚本？查看以下代码，如果我单击类.elem它将运行代码，但如果我追加新的.elem，脚本将无法运行。

JS：

$('.elem').on('click', function(){
    $('.result').show().fadeOut('slow');
});
$('.add').on('click', function(){
    $('.block').append('<div class="elem">Element</div>');
});

HTML：

<div class="block">
    <div class="elem">Element</div>
    <div class="elem">Element</div>
    <div class="elem">Element</div>
</div>

<p><span class="add">Add new</span></p>

<div class="result">Result</div>

JSFiddle here： http://jsfiddle.net/3Y3Cn/3/

任何帮助都是值得欣赏的。谢谢你;

Answer 1

将event delegation与任何 static 父元素一起使用：

$('.block').on('click', '.elem', function() {
    $('.result').show().fadeOut('slow');
});

DEMO： http://jsfiddle.net/3Y3Cn/4/

Answer 2

您应该使用event delegation：

$('.block').on('click', '.elem', function(){
  $('.result').show().fadeOut('slow');
});

为新的DOM Elements运行jQuery

2 个答案: