jQuery: was für korrekte Verwendung von .on() in dieser Situation?

Question

Betrachten Sie das folgende Markup:

<div class="parent"> 
    <div class="child"> 
     button 
    </div> 
</div> 

Ich brauche eine Funktion auf einem click Ereignis auf der child Klasse laufen und ich habe die folgenden zwei Optionen bekam:

$(".parent").on("click", ".child", function(){....}); 

und

$(document).on("click", ".child", function(){....}); 

gibt es einen dramatischen Unterschied auf der Leistung ein direktes parent als Ziel zwischen der Verwendung und die document selbst? Für mich document mit scheint, als eine robustere Option (wenn die Elternklasse wurde zum Beispiel geändert) - muß nur sicherstellen, dass es keine Probleme verursachen, wenn ich überall mit dieser Methode starten.

P.S. Die child wird dynamisch hinzugefügt innerhalb der parent daher .on() Ich verwende

Answer 1

$(".parent").on("click", ".child", function(){....}); 

bindet Ihre Click-Ereignis nur auf diejenigen Elemente mit Klasse ‚.parent‘, die in dem Dokument vorhanden sind und das Ereignis wird von dem Ziel sprudelte ('.child') zu dem Element, an dem der Handler angehängt ist. Das ist viel besser, als es die Zugabe als zu dokumentieren, ist es das Hinzufügen zu dokumentieren wie

$(document).on("click", ".child", function(){....}); 

1. Blasen aus dem Ziel in dem Dokument das Click-Ereignis, wo sie bis zu dem Körper der ganzen Weg auf, und das Dokumentelement .

2. Wie @Woff erwähnt, gebundene Handler wird nicht auf die Entfernung von .parent Elemente entfernt erhalten.

Answer 2

"Leistung" sollte in Ihrem Fall kein Problem sein.

Es gibt einen offensichtlichen Unterschied zwischen den zwei Möglichkeiten:

<div class="parent"> 
    <div class="child" id="A"> 
     button 
    </div> 
</div> 
<div class="child" id="B"> 
    button 
</div> 

Wenn Sie Ihren Handler auf document binden, auf #B klicken, wird der Handler auslösen.
Wenn Sie auf .parent Handler binden, auf #B klicken, wird die Prozedur nicht auslösen.

Sie müssen entscheiden, ob Sie alle Knoten mit der Klasse im Dokument oder nur diejenigen, die unter einem .parent-Element verschachtelt sind.

---

Andere Punkte zu berücksichtigen:

• IMHO ist es am besten so weit wie möglich den Umfang Ihrer Handlungen zu verengen. Von Ihrer Frage scheint $('.parent') das beste Ziel zu sein.

• Wenn jedoch Ihre .parent Elemente auch dynamisch hinzugefügt/entfernt werden, verwenden Sie sie nicht als verbindliche Ziele.Versuchen Sie, auf einen anderen Knoten zu zielen, den Sie erstellt haben, der aber immer im DOM verbleibt (z. B. html in ein div und binden Sie Ihre Ereignisse an $('#myModule')).

• .stopPropagation(): Der Hauptunterschied in Delegation gegen direkte Bindung ist, dass die Behandlungsroutine ausgeführt wird, wenn das Ereignis bis zum Zielknoten geperlt wird.
  Wenn Sie sich auf .stopPropagation() oder return false verlassen, um die Ausführung anderer Handler zu verhindern, wirkt sich das auf das Stoppen des Ereignisses aus.
  Hier ist ein fiddle, um dies zu veranschaulichen.