cloneNode（true）を使用した後に正しいJavascriptイベントを維持する方法

Question

私は複数の入力行を含むフォーム要素を持っています。各行は、Webアプリケーションで作成したい新しいオブジェクトの属性と考えてください。そして、私は1つのHTTP POSTで複数の新しいオブジェクトを作成できるようにしたい。私はJavascriptに組み込まれたcloneNode（true）メソッドを使用して各行を複製しています。クローン化された入力行の削除リンクをクリックすると

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

、それはまたからクローニングされた任意の入力行を削除します。問題は、各入力ラインにもそののonclickイベントに添付除去リンクを持っているということです同じDOMオブジェクト。上記のDOM要素でcloneNode（true）を使用した後、適切なアンカータグに "this"オブジェクトを再バインドすることは可能ですか？

Answer 1

各リンクにハンドラを置かないでください（これは本当にボタンでなければなりません）。最初の答えが正しいものである

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

jQueryを使用しているようですか？それはイベントで要素を複製する方法を持っています：http://docs.jquery.com/Manipulation/clone#true

EDIT：私はあなたがプロトタイプを使用して参照してください。

Answer 3

あなたはinnerHTMLの方法、またはミックスを使用してクローニング試みることができる。また

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

：私はcloneNodeをがにaddEventListenerで登録されたイベントを、クローンしないと思います。しかし、IEのattachEventイベントはが複製されています。しかし、私は間違っているかもしれません。

Answer 4

これをIE7とFF3でテストしたところ、期待通りに機能しました。何か別のことが起こっているはずです。ここで

は私のテストスクリプトがあります：

<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

この問題をデバッグするために、私はあなたのコードの関数で

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

をラップします：

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

これは、あなたが見つけることができるようになります$（これ）が何を返すのか。実際に複数のオブジェクト（複数行）が返されている場合は、cloneNodeを使用して要素を作成するコード内で、どこを見ているかが分かります。結果の要素の変更を行いますか（つまりid属性を変更しますか？）

問題が発生した場合は、トリガー要素と「ライン」要素に一意のIDを追加することを検討します。

Answer 6

：1つのハンドラとすべてボタンを処理するためにevent bubblingを使用してください。

ポルネルは、ブラウザとフレームワークに最も無関係な解決策を暗黙のうちに提案しています。

これはテストされていませんが、このような動的な状況でイベントが発生するという概念では機能します。