0

これが私のコードです：

$(document).ready(function(){
    $("#add_tactic").click(function(){
        var i = ($('#tactic_commentary tr').length-3)/2+1;
        $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>');
        $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>');
    });
});

私の #add_tactic は次のとおりです。

<div id="add_tactic">Add Tactic</div>

このページが読み込まれると、クリック時のイベントが正常に機能します。フォームのドロップダウンが変更されると、選択に応じて DIV コンテナーが再構築されたフォームに置き換えられます。テーブルがリロードされると、add_tactic のオンクリック機能が機能しません。テーブル ID は変更されません。要素が戻ったときにイベントがバインドされるように、要素を削除するときに何かしなければならないことはありますか?

4

3 に答える 3

4

はいあります。jQuery では、これをイベント委任と呼びます。

jQuery の使用を活用することで、イベント委任を実現でき.on() ます。要するに、削除/置換されない静的要素に関数をバインドする必要があります。この例では を使用しますdocumentが、パフォーマンスのために、より近い静的要素をターゲットにする必要があります。

$(document).on('click', '#add_tactic', function(){
    var i = ($('#tactic_commentary tr').length-3)/2+1;
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>');
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>');
});

これにより、削除/置換に関係なく、クリック イベントが確実に発生します。

于 2013-06-12T22:00:46.683 に答える
2

remove()HTML を呼び出したり上書きしたりしないでください。detach()メソッドを使用すると、DOM から要素が削除されますが、関連するデータ/ハンドラは jQuery のメモリに保持されます。

var detachedHtml = $('#add_tactic').detach();
// later on...
$(parentContainer).append(detachedHtml);
于 2013-06-12T21:59:44.697 に答える
0

要素を削除すると、それにバインドされているすべてのイベント ハンドラーも削除されます。同じ ID の同じ場所に新しい要素を作成することは、まさに新しい要素です。イベント ハンドラーを機能させるには、イベント ハンドラーを再度バインドする必要があります。

または、ハンドラーを親コンテナーとデリゲートにバインドすることもできます。

例えば：

$('body').on('click', '#add_tactic', function(e) {
    // your code here
});

これは、現在または将来追加される #add_tactic のすべてのインスタンスに対して機能します。これは #add_tactic 要素を指します

#add_tactic 要素に近いコンテナー要素にハンドラーをバインドすることをお勧めします。

于 2013-06-12T22:04:34.753 に答える