JQuery: made Elemente mit clone() nicht Ereigniseigenschaften von Original

Question

HTML unter:

<h2>CHECK AS MANY AS YOU CAN</h2> 
<form id="boxone"> 
</form> 

JS:

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

for(var i=0; i <341; i++) { 

    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

Der Rest der Kontrollkästchen alarmieren nicht, wenn ich klicke auf sie, nur das Original tut Ich probierte sogar $ viertesboxes.on ('Klick' ... stattdessen und immer noch nichts. Ich schaute auf diese Frage und versuchte die Lösung aber es hat nicht funktioniert.

jQuery clone() not cloning event bindings, even with on()

Answer 1

Verwendung .on():

$(document).on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 

Das macht Ihre Event-Handler Arbeit für aktuelle Elemente, sondern auch künftig hinzugefügten Elemente, welche die .fourthboxes Selektor entsprechen. Dies verwendet das Prinzip delegierte Ereignisse.

Aus der Dokumentation:

Wenn ein Selektor zur Verfügung gestellt wird, wird der Event-Handler bezeichnet als delegiert. Der Handler wird nicht aufgerufen, wenn das Ereignis direkt auf dem gebundenen Element auftritt, sondern nur für Nachkommen (innere Elemente), die mit dem Selektor übereinstimmen. jQuery bubbelt das Ereignis vom Ereignisziel bis zum Element, an dem der Handler angefügt ist (d. h. innerstes zum äußersten Element), und führt den Handler für alle Elemente entlang des Pfads aus, der dem Selektor entspricht.

Delegierte Ereignisse haben den Vorteil, dass sie Ereignisse von untergeordneten Elementen verarbeiten können, die dem Dokument zu einem späteren Zeitpunkt hinzugefügt werden.

Answer 2

Es wählt nur das Original, weil Sie nie die neuen Elemente auswählen. Der Selektor hat nur das Original, es ist keine Live-Sammlung. Sie müssen sie also erneut auswählen.

$(".fourthboxes").on("change", ...) 

Sie können die Ereignisdelegierung verwenden, damit Sie nicht alle Kontrollkästchen aktivieren. Achten Sie auf das Änderungsereignis im Formular.

$("#boxone").on("change", ".fourthboxes", function(){}); 

Answer 3

Das Problem liegt daran, dass, obwohl Sie verwenden clone(true, true) Sie die Elemente klonen vor Sie die change Event-Handler, um sie hinzuzufügen. Sie müssen nur um die Logik tauschen:

$boxone = $("#boxone"); 
$boxone.html('<input type="checkbox" class="fourthboxes">'); 
$fourthboxes = $(".fourthboxes"); 

$fourthboxes.change(function() { 
    alert('yo'); 
}); 

for(var i=0; i <341; i++) { 
    $fourthboxes.clone(true, true).appendTo($boxone); 
} 

Allerdings wäre es viel sein besser eine einzelne delegierte Event-Handler zu verwenden, wie folgt aus:

var $boxone = $("#boxone").on('change', '.fourthboxes', function() { 
    alert('yo'); 
}); 
var $fourthboxes = $('<input type="checkbox" class="fourthboxes">').appendTo('#boxone'); 

for (var i = 0; i < 341; i++) { 
    $fourthboxes.clone().appendTo($boxone); 
} 

Working example

Answer 4

Da Sie Weisen Sie die Variable $(".fourthboxes") der Variablen $fourthboxes zu, bevor Sie die 340 anderen Kontrollkästchen hinzufügen, die Variable enthält immer noch nur dieses eine Kontrollkästchen, wenn Sie die Änderungsfunktion hinzufügen.

Setzen Sie die Change-Funktion vor die For-Schleife und alles funktioniert wie erwartet.

Answer 5

Wenn Sie ein Objekt clone sind, werden nur die Objekte geklont. Und nicht ihre Ereignisse. Da die Ereignisse vor dem Erstellen des Klons an das ursprüngliche Objekt gebunden sind (basierend auf dem verwendeten jQuery-Selektor).

Wie @trincot in seiner Antwort erwähnt, müssen Sie ein Ereignis auf Dokumentebene haben.

Für z. Sagen wir, mein DOM

<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 
<input type="checkbox" class="fourthboxes"> 

nun drei Eingangskontrollkästchen enthält, wenn Sie Ereignisse binden, um die jQuery-Selektor wie diese verwenden,

$(".fourthboxes").change(function() { 
    alert('yo'); 
}); 

Dinge zu beachten, ist, dass diese jQuery-Selektor ein Array von DOM-Elementen gibt die sind auf der Seite vorhanden, zu diesem Zeitpunkt. Und dann wird das Onchange-Ereignis auf jedem von ihnen registriert. Es entspricht dem Binden des Ereignisses an jedes vorhandene DOM (in diesem Fall drei Kontrollkästchen)