jquery Klick-Filter auf die Schaltfläche Elemente

Question

In der Vergangenheit habe ich das folgende Format verwendet haben, klicken Sie Ereignishandler in jquery zum Beispiel zu erstellen, wenn ich die folgende html

<div class="new-folder">Click me</div> 

Und dann verwenden Sie diese jQuery einen Klick zuweisen Handler und filter den Klick.

$('div').on('click','.new-folder',function(){}); 

, dass alle Klicks auf einem div-Elemente mit der entsprechenden Klasse fangen würde, aber nur die Funktion ausgeführt werden, wenn das Element eine Klasse neuer Ordner hat. und das funktioniert großartig.

Aber wenn ich versuche, die Click-Ereignisse auf einem Button-Elemente wie folgt zu filtern:

<button type="button" class="new-folder">Click me</button> 

Der Selektor (unten) nicht für mich zu arbeiten.

$('button').on('click','.new-folder',function(){}); 

Wenn ich die Klasse zum ursprünglichen Elementselektor verschiebe, funktioniert es. Diese Zeile (unten) funktioniert also wie erwartet.

$('button.new-folder').on('click',function(){}); 

Ich hatte immer wenn der Filter-Ansatz besser war, weil es mit dynamischen Inhalten gearbeitet, das heißt, wenn die Schaltfläche nicht die Klasse hat oder mit Code hinzugefügt, nachdem der Handler den Filteransatz zugeordnet funktioniert, aber die Annäherung ohne den Filter wird fehlschlagen.

Ich bin mir sicher, dass es etwas sehr einfaches hier fehlt. Was ist anders an Tasten?

Verwenden von jQuery 1.10.2, wenn das wichtig ist.

Answer 1

Das $('div').on('click','.new-folder',function(){}); Format ist jQuery event delegation syntax für die .on() method. Wie die Dokumentation zu erläutern, wird der Selektor als zweites Argument ein Nachkomme von dem ersten Selektor in der Anweisung (Hervorhebung von mir):

Ein Selektor String Die Abkömmlinge der ausgewählten Elemente zu filtern , die das Ereignis auslösen . Wenn der Selektor null oder ausgelassen ist, wird das Ereignis immer ausgelöst, wenn es das ausgewählte Element erreicht.

So für $('button').on('click','.new-folder',function(){}); zu arbeiten, benötigen Sie ein Element mit der Klasse. new-folder ein Nachkomme eines <button> Elements sein.

Answer 2

dies versuchen:

$('body').on('click','button.new-folder',function(){}); 

heißt, bindet an ein Element, das in dem Moment besteht, dass der JS läuft (Körper, wenn die Seite geladen vorhanden ist), und eine Auswahleinrichtung in dem zweiten Parameter liefern. auf(). Wenn ein Klick auf body stattfindet, überprüft Element jQuery, ob es auf ein untergeordnetes Element dieses Elements angewendet wurde, das dem Selektor button.new-folder entspricht.

für weitere reading

Answer 3

Hier ist der Unterschied zwischen den zwei Ausdrücken:

$('button').on('click','.new-folder',function(){}); // delegates a click event to the all the child elements with class 'new-folder' inside the button elements. 
$('button.new-folder').on('click',function(){}); // delegates a click event to the element button with class 'new-folder' 

Answer 4

Dieser Code:

$('div').on('click','.new-folder',function(){}); 

Würde nie triggern:

<div class="new-folder">Click me</div> 

Weil der Selektor .new-folder auf Nachkommen von $ ('div') feuert, die in diesem Fall nicht existieren.

Ich nehme an, es war für Sie zu arbeiten, weil Sie Ihren Code ein div-Container irgendwo sonst auf der HTML-Markup wie hat.

<div> 
..... 
<div class="new-folder">Click me</div> 
.... 
</div>