5

複数行の入力を含むフォーム要素があります。各行は、Web アプリケーションで作成する新しいオブジェクトの属性と考えてください。そして、1 回の HTTP POST で複数の新しいオブジェクトを作成できるようにしたいと考えています。Javascript の組み込み cloneNode(true) メソッドを使用して、各行を複製しています。問題は、各入力行にも onclick イベントに添付された削除リンクがあることです。

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

複製された入力行の削除リンクをクリックすると、同じ dom オブジェクトから複製された入力行も削除されます。上記のDOM要素でcloneNode(true)を使用した後、「this」オブジェクトを適切なアンカータグに再バインドすることは可能ですか?

4

6 に答える 6

7

各リンクにハンドラーを配置しないでください (これは実際にはボタンである必要があります)。イベント バブリングを使用して、すべてのボタンを 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…&gt;
  <button type=button class=remove>Remove without JS handler!</button>
</div>
于 2008-10-12T01:53:07.863 に答える
0

これを 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>
于 2008-10-04T15:25:47.867 に答える
0

この問題をデバッグするには、コードをラップします

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

関数で：

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

これにより、 $(this) が何を返しているかを知ることができます。実際に複数のオブジェクト (複数の行) を返している場合は、cloneNode を使用して要素を作成するコードのどこを見ればよいかがわかります。結果の要素を変更しますか (つまり、id 属性を変更しますか?)

あなたが説明している問題があった場合は、トリガー要素と「線」要素に一意の ID を追加することを検討します。

于 2008-10-06T17:35:30.630 に答える
0

innerHTML メソッドまたはその組み合わせを使用して複製を試すことができます。

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

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

于 2008-08-28T13:34:50.797 に答える
0

最初の答えは正しいものです。

Pornel は暗黙のうちに、最もクロスブラウザーやフレームワークにとらわれないソリューションを提案しています。

テストはしていませんが、このコンセプトは、イベントを含むこれらの動的な状況で機能します。

于 2008-10-18T23:27:19.073 に答える
-1

jQueryを使用しているようですか？イベントで要素を複製するメソッドがあります: http://docs.jquery.com/Manipulation/clone#true

編集: おっと、Prototype を使用しているようです。

于 2008-08-27T09:18:06.040 に答える