0

2 つのテーブル間で行を移動しようとしていますが、クリック イベントをバインドしたままにすることができません。イベントのセレクター部分で混乱して.onいます。それで何をターゲットにしているのかわかりません。

基本的に、1 つのテーブルに移動して元に戻すことはできますが、クリック プロパティが失われます。理由がわからない。

問題をより明確にするために、フィドル（http://jsfiddle.net/Yjqkn/216/ ）を添付しました。承認ボタンで下に移動し、待機リスト ボタンで元に戻しますが、すべてのイベント リスナーが失われます.bind。

試した：.on("click","button.remove-participant",function()うまくいかなかった

Javascript

$( ":button" ).on("click",function(){

    if($(this).hasClass('remove-participant')) {
        $(this).removeClass('remove-participant').addClass('add-participant');
        $(this).html('Approve');
        var current_row = $(this).closest('tr').html();

        $('.table_2 > tbody:last').append('<tr>'+current_row+'</tr>');
        $(this).closest('tr').remove();

        $( ".table_2 .add-participant" ).bind( "click", function() {
            $(this).removeClass('add-participant').addClass('remove-participant');
            var current_row = $(this).closest('tr').html();
            $(this).html('Waitlist');

            $('.table_1 > tbody:last').append('<tr>'+current_row+'</tr>');
            $(this).closest('tr').remove();
        });
    }
});

HTML

<table class="table_1">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr><td>Don</td>
      <td><button class="remove-participant" name="">Remove</button></td>
    </tr>
  </tbody>
</table>
<table class="table_2">
  <tr>
    <th>Info Header 1</th><th>Info Header 2</th>
  </tr>
  <tbody>
    <tr></tr>
  </tbody>
</table>
4

2 に答える 2

1

以下を使用する必要があります。

$(".table_1").on("click", "button.remove_participant", function() {
    ...
});

イベント委譲の一般的な考え方は、ハンドラーを DOM で静的であり、動的に追加されたすべての要素を含むいくつかの要素にバインドすることです。次に、セレクター引数で、デリゲート先のより具体的な動的要素を指定する必要があります。

また、クリック ハンドラー内にclickハンドラーをバインドしているのも正しくないようです。参加者を削除するたびに、すべての要素に別のクリック ハンドラーが追加されるため、それらの要素をクリックすると、ハンドラーが複数回実行されます。ハンドラーは 1 回だけ委譲する必要があります。委譲の要点は、DOM を変更するたびにやり直す必要がないように、動的な変更を取得することです。.table_2 .add_participantbutton.remove_participant.add_participant

ところで、

.removeClass('class1').addClass('class2');

次のように組み合わせることができます。

toggleClass('class1 class2');
于 2013-09-19T00:54:36.820 に答える
-1

私の意見では、あなたのコードが機能していないのは、あなたのロジックが原因です。ここでこれを行っています: 表 1 では、クラスを削除しています。$(this).removeClass('remove-participant').addClass('add-participant');

テーブル 2 をクリックして、同じことを行います。しかし、戻ってテーブル 1 に remove-participant クラスを追加することはありません。クラスが「add-participant」に設定され、元に戻されていないため、テーブル 1 のクリックは機能しません。

于 2013-09-19T01:00:15.240 に答える