wie Live-Click-Ereignis auf neu hinzugefügt DOM

Question

Ich bin ein Live() Benutzer, und ich weiß, irgendwie live() ist veraltet. Ich habe versucht, bind() zu verwenden, um das Ereignis auf neu hinzugefügten Dom funktioniert, aber es ist nicht.

Können Sie mir bitte sagen, wie man bind() richtig macht? oder gibt es eine andere Methode, um diese Aufgabe zu erledigen?

dies ist der html:

<table> 
    <tr> 
     <td> hi there <span class="click">click me</span></td> 
    <tr> 
    <tr> 
     <td> hi there2 <span class="click">click me</span></td> 
    <tr> 
    <tr class="end"> 
     <td></td> 
    </tr> 
</table> 
<button class="add_new">add new row</button> 

dies ist die js:

var new_row = '<tr><td> hi there, new row! <span class="click">click me</span></td><tr>'; 

$('.add_new').click(function() { 
    $('.end').before(new_row);  
}); 


$('.click').bind('click', function() { 
    alert('clicked'); 
}); 

wenn möglich, ich nativen jquery-Methode verwenden möchten, und nicht Plugins. dies ist mein jsfiddle http://jsfiddle.net/bondythegreat/z3uXH/

Answer 1

Sie die dynamische Version von .on() oder .delegate() jQuery verwenden müssen.

$('table').on('click', '.click', function() { 
    // your code here 
}); 

Für dynamisches Verhalten delegierte Ereignisbehandlung verwendet wird, ist die Grundidee, dass die ersten Auswahl (im Objekt jQuery) muss ein statisches Objekt Eltern sein, die nicht dynamisch erstellt wird, nachdem der Event-Handler installiert ist. Der zweite Selektor, der als zweites Argument an .on() übergeben wird, ist ein Selektor, der dem bestimmten Element entspricht, für das der Ereignishandler aktiviert werden soll. Diese Elemente können dynamisch erstellt werden, nachdem der Ereignishandler installiert wurde.

Mit .click() oder .bind() erhalten Sie statische Event-Handler, die nur auf Objekten arbeiten, die zum Zeitpunkt der Codeausführung vorhanden sind.

Um diesen Code robuster zu machen, würde ich zwei Dinge vorschlagen. Erstens, verwenden Sie keinen Klassennamen wie "Klick", der sehr leicht mit einem Ereignis verwechselt werden kann. Zweitens, legen Sie eine ID auf Ihrem Tisch, so dass ID in der ersten Selektor verwiesen werden kann, anstatt die sehr generische "table", die versehentlich auf anderen Tabellen auf Ihrer Seite aktiv sein kann.

Answer 2

Sie benötigen jQuery on() method

Wie so zu verwenden:

$('table').on('click', '.click', function() { 
    alert('clicked'); 
}); 

Answer 3

Ab jQuery 1.7 + live() wird durch on() ersetzt. Die Dokumentseiten für live() enthalten eine Anleitung zum Aktualisieren auf neuere Methoden.

In Ihrem Fall, die übersetzen würde:

$('table').on('click','.click', function() { 
    alert('clicked'); 
}); 

Siehe eine altered & working fiddle