on() vs live() klicken Funktion auf Element, das noch nicht existiert

Question

Soweit ich weiß, die click() Methode funktioniert nicht für mich, weil das Element, das ich klicke, nicht beim Laden der Seite (DOM bereit).

Ich habe viele Antworten gefunden, die darauf hinweisen, .live('click',function(){...}) zu verwenden. Das funktioniert großartig!

jedoch .live() wie von jQuery 1.7 abgeschrieben

Also, ich habe stattdessen .on('click',function(){...}) versucht, mit, aber es funktioniert nicht, nicht (verhält sich wie .click().

Weiß jemand, warum, oder was ich tun kann .on() verwenden ähnlich .live() (das funktioniert)?

Answer 1

Da on() beide ersetzt bind() und live(), benötigen Sie einen dritten Parameter übergeben, um zu Verwendung von Ereignis zu machen Delegation (in anderen Worten, es wie die alten live() funktioniert):

$('#container').on('click', '.element', function(){ }); 

Answer 2

Sie in der Lage sein sollte, ein Format wie folgt zu verwenden:

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

Wo element ist das Element, das Sie binden möchten das Click-Ereignis zu. Die Verwendung von document ist ein Worst-Case-Szenario, da Sie idealerweise ein Element verwenden möchten, das vorhanden ist, wenn das DOM geladen wird, das sich in der DOM-Hierarchie näher an dem Element befindet, das dynamisch geladen wird.

Aus dem jQuery .on() docs:

Eventhandler nur auf die aktuell ausgewählten Elemente gebunden ist; Sie müssen auf der Seite zu dem Zeitpunkt vorhanden sein, zu dem der Code den Aufruf von .on() aufruft. Um sicherzustellen, dass die Elemente vorhanden sind und ausgewählt werden können, führen Sie das Ereignis in einem Dokument-Ready-Handler für Elemente ein, die sich im HTML-Markup auf der Seite befinden. Wenn neuer HTML-Code in die Seite eingefügt wird, wählen Sie die Elemente aus und hängen Sie Ereignishandler an, nachdem der neue HTML-Code auf der Seite platziert wurde.