0

jQuery を使用してテーブル内の行を削除しようとしています。この表では、行の最初の項目としてボタンが示されています。そのボタンをクリックすると、MySQL テーブルからその行が削除されます。

ここにJavaScriptコードがあります

      $("#list .del").click(function() {
      cell = $(this);
      row  = cell.closest("tr");
      vid = row.find (".vid");
      alert (vid.text());

      $.post ("db_deleteplayer.php",
        {vid:vid.text()},
        updateSignup);
      return;

    }) //#list .del click      


    function updateSignup(data) {
        $('#list').html(data);
      return;
    }

これは、削除したい最初の行では完全に機能しますが、その後は失敗します。これは Firefox、Chrome、IE で確認済みです。

私の推測では、最初の削除は DOM の変更であり、jQuery は混乱します。誰かが私が間違っているところを説明してもらえますか?

4

2 に答える 2

7

変化する：

$("#list .del").click(function({

に：

$("#list").on('click', '.del', function(){

基本的に、 を呼び出すと$('#list').html(..)、 内の要素が置き換えられ#listます。その際、以前にバインドされたイベント ハンドラーが削除されます。

に置き換えることで.on('click', '.del', function...、ハンドラーを にアタッチします。#listこれは常に DOM に残ります (この例では)。次に、ハンドラはイベントの元のターゲットをチェックして、 class があるかどうかを確認し、ある.del場合はハンドラを実行します。

委任されたイベントの詳細: https://stackoverflow.com/a/8111171/1238887

于 2012-11-19T23:09:21.503 に答える
0

これはどうですか？これは、ボタンがあった行を削除するだけです.del(したがって、実際には更新されません)。もちろん、これが役立つかどうかは設定次第ですが.del、行の内側にある場合は問題なく動作するはずです。

$("#list .del").click(function(e) {
    var row = $(this).closest("tr");
    $.post(
        "db_deleteplayer.php",
        {
            vid: row.find(".vid").text()
        },
        function(data) {
            row.remove();
        }
    );

    e.stopPropagation();
    e.preventDefault();
});
于 2012-11-19T23:12:37.343 に答える