Ich habe zwei <div> -Elemente und den folgenden JavaScript-Code:
Dies erzeugt erwartungsgemäß ein <input> -Element in jedem der beiden <div> -Elemente.
Jetzt, wenn ich eine neue Instanz von myObject erstelle und insert() wieder anrufe erwarte ich 4 <input> elements, zwei in jedem <div> . Seltsamerweise bekomme ich nur 3 <input> Elemente!
Siehe Beispielcode hier: Ссылка
Sie erstellen 1 Eingabe explizit:
%Vor%... aber klonen es implizit, wenn Sie versuchen, es an mehrere divs anzuhängen
%Vor% Dann erstellt Object.create kein neues $input , also hängt es beim zweiten Durchlauf die Eingabe von der zweiten div (die eigentlich das Original ist) an die erste div an, und dann führt der implizite Klon die zweite aus.
Hier ist ein jsFiddle-Beispiel , das eine i -Variable erhöht, wenn insert() aufgerufen wird, und fügt sie als Wert hinzu der Eingabe. Beachten Sie, dass es immer auf 0 gesetzt ist.
Ich habe es auch modifiziert, um eine Zeichenfolge an insert zu übergeben, damit Sie sehen können, von welchem Aufruf jede Eingabe kam.
Die beiden Eingaben vom zweiten Aufruf haben beide die Zeichenfolge, die an den ersten Aufruf übergeben wurde.
BEARBEITEN:
Ich drehte es um die mittlere Erklärung, aber das Konzept ist das gleiche.
Wenn der zweite insert() aufgerufen wird, wird zuerst der Klon des Originals erstellt und zum ersten div hinzugefügt, dann wird das Original an den zweiten div angehängt (wo es bereits ist).
jQuery erstellt die Klone zuerst und fügt dann das Original als letztes hinzu.
Hier ist ein weiteres jsFiddle-Beispiel , das dem Original eine benutzerdefinierte Eigenschaft hinzufügt und dann neben dem Element mit diesem benutzerdefinierten Text Text hinzufügt Eigenschaft nach jedem insert() . Der Text wird immer neben dem Original im zweiten div hinzugefügt.
Das ist was passiert. Aus den jQuery-Dokumenten:
Wenn ein auf diese Weise ausgewähltes Element an anderer Stelle eingefügt wird, wird es in das Ziel verschoben (nicht geklont)
Wenn es mehr als ein Zielelement gibt, werden jedoch geklonte Kopien des eingefügten Elements für jedes Ziel nach dem ersten erstellt.
Zum ersten Mal, da Ihre Eingabe nicht irgendwo im DOM ist, wird sie geklont und in beide Divs eingefügt. Aber beim zweiten Aufruf wird es aus dem zweiten div entfernt, bevor es geklont und wieder in beide divs eingefügt wird.
Am Ende Ihres Codes enthält das erste div beide Eingaben, aber das zweite div enthält nur die letzte Eingabe, da jede Eingabe von Ihrer letzten div entfernt wurde.
Sobald ein Element in das DOM eingefügt wird, ruft ein weiterer .append() -Befehl als angehängter Inhalt den Inhalt im DOM auf () Dokumente ). Ihr Code erstellt eine jQuery-Sammlung mit einer einzelnen Eingabe darin, deren Eingabe noch an das DOM angehängt werden muss. Also hängt der erste Aufruf von insert() an jeden an (unter Verwendung des internen Klonierungs- oder Kopiermechanismus von jQ).
Im zweiten Aufruf verweist this.$input jedoch auf etwas, das sich bereits im DOM befindet (aufgrund des ersten Aufrufs). Intern ist jQuery each für die Sammlung von DIVs und hängt die Eingabe an, die in this.$input lebt. Also fügt es hinzu, das verschiebt es.
Das Hauptproblem ist, dass Sie dieselbe Eingabe immer wieder anhängen. Denken Sie daran, dass JavaScript im Allgemeinen auf vorhandene Objekte verweist, anstatt neue Objekte zu erstellen. Das gleiche Eingabeelement wird immer wieder referenziert.
Wenn Sie möchten, dass eine Methode jedem DIV eine Eingabe hinzufügt, übergeben Sie das Eingabemarkup einfach an append:
%Vor%Tags und Links javascript jquery