-1

ボタンにクラスを追加し、onclick イベントで起動しようとしましたが、動作しませんでした。非常に単純なコードで、イベントがバインドされないのはなぜですか?

http://jsfiddle.net/davidThomas/n2WUn/3/

$(".remove-participant").on("click",function(){
$(this).html('Approve');
$(this).toggleClass('add-participant');
 });

$(".add-participant").on("click",function(){
alert('why no alert?');
$(this).html('Waitlist');
$(this).toggleClass('add-participant');
});
4

1 に答える 1

2

クラスを動的に削除および追加しているため、イベント バインディングは使用できなくなります。これを修正する 1 つの方法は、イベント委任を使用することです。

$(document).on("click", ".remove-participant", function () {
    $(this).html('Approve');
    $(this).toggleClass('add-participant');
});

 $(document).on("click", ".add-participant", function () {
    alert('why no alert?');
    $(this).html('Waitlist');
    $(this).toggleClass('add-participant');
});

document任意の時点で DOM に存在するコンテナー セレクターを使用する代わりに。

スクリプトを見ると、1 つのイベント ハンドラーを使用して、トグルしない別のクラスにバインドすることができます (特定の要素を追加する必要があります)。

于 2013-09-18T21:41:46.613 に答える