1

私は私を説明しようとしますが、私にとっては混乱しています.
ユーザーがセルをクリックすると、確認アクションのプロンプトが表示され、セルが再描画される週次カレンダーを開発しています。これをより詳細にしましょう：

HTML マークアップ:

<td> <a class="free"></a> </td>

JS コードは次のようになります (疑似コード):

$(".free").click(function() {
    alert('engaging');
    $(this).text("taken");
    $(this).removeClass("free").addClass("taken");
})

ここで何がうまくいかないのですか？エレメント クラスが「free」ではなく「taken」に置き換えられると、ユーザーがこのリンクをもう一度クリックすると、本来表示されるべきではないアラートが再び表示されます。

jsfiddle のこの例は、私のシナリオを示していると思います

前もって感謝します

4

2 に答える 2

4

元の構文はハンドラーを要素自体にバインドし、ハンドラーは一度だけバインドされます。要素のクラスに対するその後の変更は、ハンドラーには影響しません。代わりに委任されたイベントを使用してください。http://api.jquery.com/on/

$(document).on('click','.free', function() {

    alert('engaging');

    $(this).text("taken");
    $(this).removeClass("free").addClass("taken");
});

デモ

class を持つ複数の要素が.freeあり、複数のクリックでこのクラスを動的に追加または削除できる場合、このタイプのハンドラーを使用すると、現在 class を持つ要素の「クリック」イベントのみをキャッチできます.free。.offまた、代わりに を使用すると、要素に再度追加.freeしても、ハンドラーは起動せず、その要素にバインドされた他の「クリック」ハンドラーも発生しないことに注意してください。

于 2012-07-22T21:22:45.523 に答える
4

クリック ハンドラーは引き続き要素にアタッチされます。そのクラスを動的に変更しても、off()でハンドラーを削除する必要があります。

$(".free").on('click', function(){
     alert('engaging');
     $(this).text("reservada").removeClass("free").addClass("taken").off('click');
});

フィドル

于 2012-07-22T21:23:28.643 に答える