は、関数は（）

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'); 
}); 

が、今#storyの内容を交換した新しいコンテンツでは動作しません。 ajaxプロシージャを使用して：

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

新しいコンテンツは

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

ここではon('click', function()は機能しません。クラスは削除/追加されません。 clickが呼び出された時点でDOMで使用可能なHTML要素に対してのみ作業を結合

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

Answer 1

Event delegationは、トリックを行います。 DOMに何かを追加した後、新しいクリックリスナーをバインドする必要があります。

Answer 2

クリック：

Answer 3

dinamically追加要素のための

使用イベント委任：

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

あなたはhere詳細を読むことができます。