0

次のコード スニペットがあります。

HTML (簡体字):

    <tr>
    <td><div id="insert_24" class="insert">Invoegen</div></td>
    </tr>

フォームからデータを取得するためにJS関数が実行されている（簡略化されている）、データベースに追加してから、正しいクラスとIDでフォーム/テーブルを更新します。

    $(".insert").click(function() {
        // current field, is the id: insert_24
        // layer is retrieved in the function: 24
        // Full table has the id 'canvas'

        // do something
        // Insert into database

        console.log('insert-'+layer);
        $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer);
        $("table#canvas tr:last").attr('id', 'row_'+layer);
    });

このコードの直後に、行を削除するコードもあります (簡略化)。

    $(".delete").live("click", function() {
        // do something
        // Insert into database

        console.log('delete-'+layer);
        $("#row_"+ layer).remove();         
    });

挿入は完全に機能しますが、「挿入」のコンソール ログ関数を見ると、「削除」機能も挿入の直後にトリガーされており、意味がありません。一度だけクリックしまし<div>た。

この機能を正しく動作させるには、どの手順/設定が欠けていますか?

4

2 に答える 2

4

ハンドラclick()をreturn false;、または:

$(".insert").click(function(e) {
    e.stopPropagation();
    // your code here
});

.live()ドキュメント レベルでハンドラーをアタッチし、イベントがバブルアップするのを待つことによって機能します。その時点で、元のターゲット要素が使用したセレクターと一致するかどうかがチェックされます。したがって、クリックが発生すると、最初に (非ライブ) クリック ハンドラーがトリガーされ、次にバブルアップしてライブ ハンドラーがトリガーされます。

また、要素からクラスを削除しても、"insert"その要素でのクリック ハンドラーの起動は停止しないことに注意してください。クリック ハンドラーを (ハンドラー内から) バインド解除するか、そのハンドラーもライブ ハンドラーに変更する必要があります。

かなり古くなっていることに注意してください.live()。.on()代わりに、メソッドの委任された構文を使用するように更新する必要があります..

于 2013-02-23T11:28:12.507 に答える
2

これを試して：

$(".insert").click(function(e) {
    e.stopPropagation();
    // current field, is the id: insert_24
    // layer is retrieved in the function: 24
    // Full table has the id 'canvas'

    // do something
    // Insert into database

    console.log('insert-'+layer);
    $("#"+ current_field).removeClass("insert").addClass("delete").html('delete').attr('id', 'delete_'+layer);
    $("table#canvas tr:last").attr('id', 'row_'+layer);
});

何が起こっているかというと、クリック イベントがドキュメントにバブリングしているということです。.live()イベントのターゲットがセレクターと一致するかどうかをチェックするハンドラーがドキュメントにあります。クリック ハンドラーが完了すると、DIV のクラスが に変更されるdeleteため、このチェックは成功し、ハンドラーが実行されます。

于 2013-02-23T11:27:52.637 に答える