on（＆＃39;点击＆＃39;，function（）不会处理新内容

Question

HTML

<div id='story'>    
    <div class='item folder'>sky</div>
    <div class='item folder'>sea</div> 
</div>

JS

$(".item").on('click', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

这样可行，但现在使用ajax过程替换了#story的内容：

...    
success: function(data) {
    $('#story').html(data);
}

新内容是：

<div class='item folder'>earth</div>
<div class='item folder'>venus</div> 

这里on('click', function()不起作用。不删除/添加类。

Answer 1

Event delegation可以解决问题：

$('body').on('click', '.item', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

Answer 2

使用事件委派来添加dinamically元素：

$(document).on('click', '.item', function(){
    $('.marked').removeClass('marked');
    $(this).addClass('marked');
});

您可以阅读更多 Gamer ID 。

Answer 3

单击绑定仅适用于调用click时DOM中可用的html元素。在向DOM添加内容后，必须绑定一个新的单击侦听器。