So pflegen Sie das korrekte Javascript-Ereignis nach der Verwendung von cloneNode(true)

Question

Ich habe ein Formularelement, das mehrere Eingabezeilen enthält.Stellen Sie sich jede Zeile als Attribute eines neuen Objekts vor, das ich in meiner Webanwendung erstellen möchte.Und ich möchte in einem HTTP-POST mehrere neue Objekte erstellen können.Ich verwende die integrierte cloneNode(true)-Methode von Javascript, um jede Zeile zu klonen.Das Problem besteht darin, dass jeder Eingabezeile auch ein Entfernungslink an ihr Onclick-Ereignis angehängt ist:

// prototype based
<div class="input-line">
    <input .../>
    <a href="#" onclick="$(this).up().remove();"> Remove </a>
</div>

Wenn auf den Link zum Entfernen der geklonten Eingabezeile geklickt wird, werden auch alle Eingabezeilen entfernt, die aus demselben Dom-Objekt geklont wurden.Ist es möglich, das „this“-Objekt erneut an das richtige Ankertag zu binden, nachdem cloneNode(true) für das obige DOM-Element verwendet wurde?

Answer 1

Fügen Sie nicht jedem Link einen Handler hinzu (dies sollte übrigens eigentlich eine Schaltfläche sein).Verwenden Ereignis sprudelt zu handhaben alle Schaltflächen mit einem Handler:

formObject.onclick = function(e)
{
    e=e||event; // IE sucks
    var target = e.target||e.srcElement; // and sucks again

    // target is the element that has been clicked
    if (target && target.className=='remove') 
    {
        target.parentNode.parentNode.removeChild(target.parentNode);
        return false; // stop event from bubbling elsewhere
    }
}

+

<div>
  <input…>
  <button type=button class=remove>Remove without JS handler!</button>
</div>

Answer 2

Sie könnten versuchen, mit der innerHTML-Methode oder einer Kombination zu klonen:

var newItem = $(item).cloneNode(false);
newItem.innerHTML = $(item).innerHTML;

Auch:Ich denke, cloneNode klont keine Ereignisse, die bei addEventListener registriert sind.Aber die attachmentEvent-Ereignisse des IE Sind geklont.Aber ich könnte mich irren.

Answer 3

Ich habe das in IE7 und FF3 getestet und es hat wie erwartet funktioniert – da muss noch etwas anderes im Gange sein.

Hier ist mein Testskript:

<div id="x">
    <div class="input-line" id="y">
        <input type="text">
        <a href="#" onclick="$(this).up().remove();"> Remove </a>
    </div>
</div>

<script>

$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));
$('x').appendChild($('y').cloneNode(true));

</script>

Answer 4

Um dieses Problem zu beheben, würde ich Ihren Code umschließen

$(this).up().remove()

in einer Funktion:

function _debugRemoveInputLine(this) {
    debugger;
    $(this).up().remove();
}

Auf diese Weise können Sie herausfinden, was $(this) zurückgibt.Wenn tatsächlich mehr als ein Objekt (mehrere Zeilen) zurückgegeben wird, wissen Sie definitiv, wo Sie suchen müssen – im Code, der das Element mit cloneNode erstellt.Nehmen Sie Änderungen am resultierenden Element vor (d. h.Ändern des ID-Attributs)?

Wenn ich das von Ihnen beschriebene Problem hätte, würde ich in Betracht ziehen, dem auslösenden Element und dem „line“-Element eindeutige IDs hinzuzufügen.

Answer 5

Die erste Antwort ist die richtige.

Pornel schlägt implizit die browserübergreifendste und Framework-unabhängigste Lösung vor.

Ich habe es nicht getestet, aber das Konzept wird in diesen dynamischen Situationen mit Ereignissen funktionieren.

Answer 6

Sieht so aus, als würden Sie jQuery verwenden?Es verfügt über eine Methode zum Klonen eines Elements mit Ereignissen: http://docs.jquery.com/Manipulation/clone#true

BEARBEITEN:Hoppla, ich sehe, Sie verwenden Prototype.