Wie richtige Javascript-Ereignis nach Verwendung von CloneNode beibehalten (True)

Question

Ich habe ein Formularelement, das mehrere Zeilen von Eingaben 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 der Lage sein, mehrere neue Objekte in einem HTTP-POST zu erstellen. Ich benutze Javascript eingebaute cloneNode (true) -Methode, um jede Zeile zu klonen. Das Problem ist, dass jede Eingangsleitung auch ein Entfernungsglied weist an sein OnClick-Ereignis angehängt:

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

Wenn die klonierte Eingangszeilen Absetzung Link angeklickt wird, sie entfernt auch alle Eingangsleitungen, die aus dem klonierten wurden gleiches dom-Objekt. Ist es möglich, das "this" -Objekt an das richtige Anker-Tag zu binden, nachdem cloneNode (true) für das obige DOM-Element verwendet wurde?

Answer 1

Legen Sie keinen Handler auf jeden Link (das sollte wirklich eine Schaltfläche sein, BTW). Verwenden Sie event bubblingalle Tasten mit einem Handler zu handhaben:

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

Sieht aus, als ob Sie jQuery verwenden? Es hat eine Methode, um ein Element mit Ereignissen zu klonen: http://docs.jquery.com/Manipulation/clone#true

EDIT: Ups ich sehe, dass Sie Prototyp verwenden.

Answer 3

könnten Sie versuchen, die innerHTML- Methode klonen, oder eine Mischung:

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

auch: Ich denke, cloneNode keine Ereignisse klonen, mit addEventListener registriert. Aber die attachEvent -Ereignisse von IE sind geklont. Aber ich könnte mich irren.

Answer 4

Ich habe dies in IE7 und FF3 getestet und es hat wie erwartet funktioniert - da muss etwas anderes los 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 5

Um dieses Problem zu debuggen, würde ich Ihren Code wickeln

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

in einer Funktion:

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

dies ermöglicht es Ihnen zu finden heraus, was $ (this) zurückgibt. Wenn es tatsächlich mehr als ein Objekt (mehrere Zeilen) zurückgibt, dann wissen Sie definitiv, wo Sie suchen müssen - in dem Code, der das Element mit cloneNode erzeugt. Nehmen Sie Änderungen am resultierenden Element vor (z. B. Ändern des ID-Attributs)?

Wenn ich das Problem hatte, das Sie beschreiben, würde ich überlegen, dem auslösenden Element und dem "line" -Element eindeutige IDs hinzuzufügen.

Answer 6

erste Antwort die richtige ist.

Pornel schlägt implizit die browser- und rahmenunabhängigste Lösung vor.

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