on() Methode funktioniert nicht als live()

Question

Ich ändere einige Methoden von $(selector).live('click', function(){}); zu $(selector).on('click', function(){});.

Zuerst scheint es genau gleich zu funktionieren. Aber wenn ich neues HTML in das DOM einfüge, werden die neuen Elemente, die mit demselben Selektor eingefügt wurden, nicht von $(selector).on('click', function(){}); abgefangen und bevor sie von der Methode live() abgefangen wurden.

warum? Ich vermisse etwas?

Answer 1

.on erfordert einen anderen Parametersatz als .live. Sie können nicht einfach einen durch den anderen ersetzen (und $(selector).on.live macht keinen Sinn) .

Die korrekte Syntax ist:

$(document).on('click', selector, function(){}); 

Diese auf alle Elemente binden, die selector egal übereinstimmen, wenn sie auf das DOM hinzugefügt werden.

Hinweis:

Statt document Sie einen Elternteil des Elements verwenden können (s), solange die Eltern in dem DOM bleiben.

Zum Beispiel:

<div id="myDiv"> 
    <p>Hello World</p> 
    <p>Hello World</p> 
</div> 

Dann können Sie tun:

$('#myDiv').on('click', 'p', function(){}); 

Das Click-Ereignis wird ausgelöst, für alle <p> Tags #myDiv hinzugefügt.

Hinweis:

$(selector).on('click', function(){}) 

ist die gleiche wie

tun

$(selector).bind('click', function(){}) 

(jQuery 1.7.1 schlägt vor, mit .on statt .bind)