auf ('Klick', function() funktioniert nicht auf neue Inhalte

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

Das funktioniert aber jetzt ist der der Gehalt an #story ersetzt mit Ajax-Verfahren:

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

Und der neue Inhalt ist:

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

Und hier on('click', function() funktioniert nicht. Klassen werden nicht entfernt/hinzugefügt.

Answer 1

Event delegation funktioniert der Trick:

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

Answer 2

Klicken Sie arbeiten nur für HTML-Elemente zu binden, die in der DOM zu dem Zeitpunkt verfügbar sind click genannt wird. Sie müssen einen neuen Klicklistener binden, nachdem Sie dem DOM etwas hinzugefügt haben.

Answer 3

Verwenden Ereignis Delegation für dinamically hinzugefügt Elemente:

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

können Sie mehr lesen here.