$ (document) .on ('click', '#id', function () {}) vs $ ('# id'). on ('click', function () {}) [geschlossen]

Ich habe versucht herauszufinden, was der Unterschied zwischen ist

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

und

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

Ich konnte keine Informationen darüber finden, ob es einen Unterschied zwischen den beiden gibt und wenn ja, was dieser Unterschied sein könnte.

Kann jemand bitte erklären, ob es überhaupt einen Unterschied gibt?

Das erste Beispiel zeigt die Ereignisdelegierung . Der Ereignishandler ist an ein Element höher im DOM-Baum (in diesem Fall das document) gebunden und wird ausgeführt, wenn ein Ereignis dieses Element erreicht, das von einem Element stammt, das mit dem Selektor übereinstimmt.

Dies ist möglich, weil die meisten DOM-Ereignisse den Baum vom Ursprungsort aus sprudeln lassen . Wenn Sie auf das #idElement klicken, wird ein Klickereignis generiert, das durch alle Vorfahrenelemente sprudelt ( Randnotiz: Es gibt tatsächlich eine Phase davor, die als "Erfassungsphase" bezeichnet wird, wenn das Ereignis den Baum hinunter zum Ziel ). Sie können das Ereignis für jeden dieser Vorfahren erfassen.

Das zweite Beispiel bindet den Ereignishandler direkt an das Element. Das Ereignis sprudelt weiterhin (es sei denn, Sie verhindern dies im Handler). Da der Handler jedoch an das Ziel gebunden ist, werden die Auswirkungen dieses Prozesses nicht angezeigt.

Durch Delegieren eines Ereignishandlers können Sie sicherstellen, dass er für Elemente ausgeführt wird, die zum Zeitpunkt der Bindung nicht im DOM vorhanden waren. Wenn Ihr #idElement nach Ihrem zweiten Beispiel erstellt wurde, würde Ihr Handler niemals ausgeführt. Durch die Bindung an ein Element, von dem Sie wissen, dass es sich zum Zeitpunkt der Ausführung definitiv im DOM befindet, stellen Sie sicher, dass Ihr Handler tatsächlich an etwas angehängt wird und später entsprechend ausgeführt werden kann.

Betrachten Sie den folgenden Code

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

Nun, hier geht der Unterschied

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

Was ist, wenn wir erneut eine myTask hinzufügen?

$('#myTask').append('<li>Answer this question on SO</li>');

Wenn Sie auf dieses myTask-Element klicken, wird es nicht aus der Liste entfernt, da keine Ereignishandler gebunden sind. Wenn wir stattdessen verwendet hätten .on, würde der neue Artikel ohne zusätzlichen Aufwand von unserer Seite funktionieren. So würde die .on-Version aussehen:

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

Zusammenfassung:

Der Unterschied zwischen .on()und besteht .click()darin, dass dies .click()möglicherweise nicht funktioniert, wenn die dem .click()Ereignis zugeordneten DOM-Elemente zu einem späteren Zeitpunkt dynamisch hinzugefügt werden, während .on()es in Situationen verwendet werden kann, in denen die dem .on()Aufruf zugeordneten DOM-Elemente zu einem späteren Zeitpunkt dynamisch generiert werden können.