jquery: on vs live

Question

Ich bin gespannt, warum, wenn ich .live() durch .on() ersetzen meine Ereignisse funktionieren nicht nach dem Einfügen AJAX-Antwort über html() Methode. Gehe ich davon aus HTML-Struktur haben:

<div class="a"> 
    <a href="" class="alert-link">alert</a> 
    <a href="" class="ajax-update">update</a> 
</div> 

und jQuery-Code so etwas wie:

$('.alert-link').on("click", function(){ 
alert('abc'); 
return false; 
}); 

und Ajax-Update Anfrage auslösen, die Antwort

Alarm Update

sein wird und Ich werde es in parent() einfügen. Wenn Sie dann erneut drücken, wird alert-link zu einer Umleitung zu / führen, aber wenn ich .on() zu .live() ändere, wird wieder eine Warnung angezeigt. Was fehlt mir hier? Ich habe gelesen, dass .on() Ersatz für .delegate() und .live() ist.

Answer 1

.on kombiniert und ersetzt .bind, .live und .delegate. Die Syntax $('selector').on('event', callback) ist das moralische Äquivalent von bind, nicht live.

hinzufügen Filterwähler auf Ihren Anruf on:

$('container').on('click', 'child-filter', callback); 

In diesem Fall

$('.a').on("click", ".alert-link", function(){ 
    alert('abc'); 
    return false; 
}); 

Dies wurde geändert, weil es effizienter ist, einen Delegaten Handler zu einem lokalisierten Behälter zu befestigen Element als der alte .live Stil des Anhängens des Handlers an den Stamm des DOM.

Mit anderen Worten, obwohl alert-link Elemente nur innerhalb einer kleinen adiv, mit .live erscheinen werden, hört jQuery jedes einzelne Klick-Ereignis auf der Seite und vergleicht sie mit dem delegierten Selektor. Wenn Sie gezielter arbeiten, muss jQuery nur Klicks auf Elemente innerhalb von a verarbeiten.

Answer 2

Es ist in der Tat ein Ersatz für .delegate und .live, aber Sie haben in einigen zusätzlichen Parameter zu übergeben:

var container = $('.a').on('click', '.alert-link', function() { 
    alert('abc'); 
    return false; 
}).on('click', '.ajax-update', function() { 
    // something that uses AJAX to update .a, like: 
    container.load('some-url'); 
    return false; 
}); 

Weitere Informationen see the documentation.

Answer 3

Ihre bestimmte Konvertierung in .on() funktionierte nicht ordnungsgemäß, da Sie das statische Formular .on() anstelle der dynamischen Form von .on() verwendet haben.Anstelle der statischen Form:

$('.alert-link').on("click", function(){ 

müssen Sie die dynamische Form wie folgt verwenden:

$(someStaticParentObject).on("click", '.alert-link', function(){ 

Dies wird die Event-Handler someStaticParentObject binden und dann delegierte Ereignis verwenden Umgang für alle untergeordneten Ereignisse, die ihren Ursprung auf einem Element, das dem Selektor '.alert-link' entspricht. Ihre Version war sofort an alle Elemente gebunden, die zum Zeitpunkt der Installation des Ereignishandlers (statische Bindung) vorhanden waren, und verwendete keine delegierte Ereignisbehandlung, um Ereignisse von Objekten zu verarbeiten, die noch nicht erstellt wurden.

Sehen Sie diese bisherigen Antworten für eine gute Erklärung von .live() vs. .on() und warum .live() zu Performance-Probleme in einigen Fällen führen kann:

Does jQuery.on() work for elements that are added after the event handler is created?

How does jQuery's new on() method compare to the live() method in performance?

What's the difference between jQuery.bind() and jQuery.on()?

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Why not take Javascript event delegation to the extreme?

In Kürze:

$(".item").live('click', fn); 

ist Funktionalität äquivalent zu:

$(document).on('click', '.item', fn); 

Die zwei Hauptnachteile .live() sind:

1. Es wertet den Selektor ".item" sofort welche ist reine Verschwendung von Zyklen, weil das Ergebnis überhaupt nicht verwendet wird.

2. .live() ist fest mit dem Dokumentobjekt verbunden. Es verwendet die delegierte Ereignisbehandlung, um Objekte verarbeiten zu können, die kommen und gehen, aber alle Ereignishandler .live() sind dem Dokumentobjekt zugewiesen. Wenn Sie viele davon haben, kann dies zu einem großen Leistungsengpass führen, da jedes Ereignis, das zum Dokument aufsteigt, mit den Selektoren aller Ereignisbehandlungsroutinen .live() ausgewertet werden muss. .on() kann andererseits nicht nur an das Dokumentobjekt gebunden werden, sondern auch an einen Vorfahren, der dem tatsächlichen Ursprung der Ereignisse viel näher ist, und wenn es viele delegierte Ereignishandler gibt, kann es viel effizienter zu finden sein Die Ereignisse werden näher, sodass nur die Ereignisse, die sich in der Nähe des Objekts befinden, über die .on() Selektoren verarbeitet werden, wodurch die Leistung verbessert wird.

   $("#container").on('click', '.item', fn); 
   

wo #container ist ein Elternteil der dynamischen .item Objekte: Zum Beispiel könnten die oben Handler wie folgt durchgeführt werden.