Verwendung von live() - Vorteile - ähnlich wie bei bind()

Question

Ich habe einige Lesung bis auf Jquery Live-Event und bin immer noch irgendwie verwirrt? Was ist der Vorteil, es zu benutzen?

http://docs.jquery.com/Events/live

Ich weiß, dass es ähnlich ist wie bei der Bindung, aber beide Ereignisse erscheinen mir immer noch ungewöhnlich.

Ich suche nur nach ein paar Hinweisen.

Answer 1

Warnung : Diese Antwort ist veraltet. Immer noch sehr nützlich aber live ist veraltet und wurde in neueren Versionen von jQuery entfernt. Lesen Sie also die Antwort, denn die Anwendungsfälle haben sich nicht geändert, und Sie werden erfahren, warum und wann Sie weniger Event-Handler verwenden sollten. Aber wenn Sie nicht gerade eine sehr alte Version von jQuery verwenden (v1.4.2 oder früher), sollten Sie sich überlegen, ob Sie nicht stattdessen den neuen äquivalenten Code schreiben wollen. Wie dokumentiert in der jQuery API für live und hier kopiert:

Umschreiben der .live() Methode in Bezug auf ihre Nachfolger ist einfach; diese sind Vorlagen für gleichwertige Aufrufe für alle drei Ereignisanordnungsmethoden:

1. $( selector ).live( events, data, handler ); // jQuery 1.3+
2. $( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
3. $( document ).on( events, selector, data, handler ); // jQuery 1.7+

Manchmal gibt es beim Laden der Seite eine Reihe von Elementen, z. B. Bearbeitungslinks:

<table>
  <tr>
    <td>Item 1</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td><a href="#" class="edit">Edit</a></td>
  </tr>
</table>

Nun, vielleicht haben Sie so etwas mit jQuery:

$(document).ready(function() {
  $('a.edit').click(function() {
    // do something
    return false;
  });
});

Was aber, wenn Sie ein neues Element zu dieser Tabelle dynamisch hinzufügen, nachdem die Seite ursprünglich geladen wurde?

$('table').append('
    <tr><td>Item 4</td><td><a href="#" class="edit">Edit</a></td></tr>
');

Wenn Sie bei diesem neuen Element auf "Bearbeiten" klicken, passiert nichts, weil die Ereignisse beim Laden der Seite gebunden wurden. Geben Sie live ein. Damit können Sie das obige Ereignis wie folgt binden:

$(document).ready(function() {
  $('a.edit').live('click', function() {
    // do something
    return false;
  });
});

Wenn Sie nun eine neue <a> Elemente mit einer Klasse von edit nachdem die Seite zum ersten Mal geladen wurde, wird dieser Event-Handler trotzdem registriert.

Doch wie wird dies erreicht?

jQuery verwendet die so genannte Ereignisdelegation, um diese Funktionalität zu erreichen. Die Ereignisdelegation ist in dieser Situation hilfreich oder wenn Sie eine große Anzahl von Handlern laden möchten. Nehmen wir an, Sie haben ein DIV mit Bildern:

<div id="container">
    <img src="happy.jpg">
    <img src="sad.jpg">
    <img src="laugh.jpg">
    <img src="boring.jpg">
</div>

Aber statt 4 Bildern haben Sie 100, 200 oder 1000. Sie möchten ein Klick-Ereignis an Bilder binden, so dass eine Aktion X ausgeführt wird, wenn der Benutzer darauf klickt. Doing es, wie Sie vielleicht erwarten ...

$('#container img').click(function() {
    // do something
});

...würde dann Hunderte von Handlern binden, die alle das Gleiche tun! Das ist ineffizient und kann bei umfangreichen Webanwendungen zu einer langsamen Leistung führen. Mit der Ereignisdelegation, auch wenn Sie nicht planen, später weitere Bilder hinzuzufügen, kann die Verwendung von live für diese Art von Situation viel besser sein, da Sie dann binden können eine Handler an den Container und prüft, ob das Ziel ein Bild war, wenn es angeklickt wird, und führt dann eine Aktion aus:

// to achieve the effect without live...
$('#container').click(function(e) {
    if($(e.target).is('img')) {
        performAction(e.target);
    }
});

// or, with live:
$('img', '#container').live('click', function() {
    performAction(this);
});

Da jQuery weiß, dass später neue Elemente hinzugefügt werden können oder dass die Leistung wichtig ist, könnte es, anstatt ein Ereignis an die eigentlichen Bilder zu binden, eines an das div wie im ersten Beispiel hinzufügen (in Wirklichkeit bin ich mir ziemlich sicher, dass es sie an den Körper bindet, aber es könnte an den Container im obigen Beispiel) und dann delegieren. Diese e.target können Sie nachträglich prüfen lassen, ob das Ereignis, auf das geklickt bzw. auf das reagiert wurde, mit dem Selektor übereinstimmt, den Sie möglicherweise angegeben haben.

Um es deutlich zu machen: Dies ist nicht nur hilfreich, weil die Ereignisse nicht neu gebunden werden müssen, sondern auch, weil es bei einer großen Anzahl von Elementen wesentlich schneller geht.

Answer 2

Im Grunde genommen, mit .live() müssen Sie sich nicht um die Aktualisierung von Ereignis-Handlern kümmern, wenn Sie eine sehr dynamische Website haben.

$('.hello').live('click', function () {
  alert('Hello!');
});

In diesem Beispiel wird das Klick-Ereignis an alle Elemente gebunden, die bereits die Klasse "hello" haben wie auch alle Elemente, die dynamisch eingefügt werden, sei es durch AJAX oder durch herkömmliches JavaScript.

Answer 3

Der Vorteil ist, dass der Event-Handler auch zu neuen passenden Elementen hinzugefügt wird, wenn diese Elemente erstellt werden. Dadurch müssen Sie den Event-Handler nicht jedes Mal manuell hinzufügen, wenn Sie ein neues Element erstellen (das einem zuvor verwendeten Selektor entspricht), das ihn benötigt.

Hinzugefügt in jQuery 1.3: Bindet einen Handler an ein Ereignis (wie Klick) für alle aktuellen - und Zukunft - übereinstimmend Element.

En http://docs.jquery.com/Events/live#typefn , Hervorhebung von mir.