jquery - JQuery トグルクラスにイベントを追加する

Question

私のマークアップ:

<ul id="playerControls">
    <li class="play-bt"></li>
</ul>

そして、再生ボタンが押された場合に発生するこのイベントがあります。

$(".play-bt").bind('click',function(){
    $(this).toggleClass('pause-bt');
});

今、play-btクラス名がに変更されたと仮定していpause-btますが、どうしてこのイベントが発生するのですか:

$(".pause-bt").bind('click',function(){
    console.log('PEW');
});

解雇されない？

score 5 · Accepted Answer

ここで、.play-bt クラス名が pause-bt に変更されたと仮定します。

toggleClassそのようには機能しません。

toggleClassaddClassとの組み合わせですremoveClass。

toggleClass指定されたクラスが存在するかどうかをチェックします。

イベントが発生しない理由については、 class を割り当てる前にpause-btそのクリックイベントをバインドする必要があるためです。

bind()その時点でセレクターに一致するすべての要素を検索し、関数をイベントハンドラーに割り当てます。

このイベントを再バインドするか、live()代わりに使用する必要がありますbind()

live():

現在および将来において、現在のセレクターに一致するすべての要素のイベントハンドラーをアタッチします。

score 3 · Accepted Answer

.bind()その時点で存在する要素のみをキャプチャします。要素には最初にそのクラスがなかったため、バインドされませんでした。jQuery のバージョンに応じて、またはのいずれかが.live()必要.on()です。

score 0 · Accepted Answer

バインディングを最初に設定したとき、対象の要素にはそのクラスがなかったからです。jQuery .on() 関数を使用して、次のようにコンテナーにバインドします。

$('#playerControls').on('click', '.pause-bt', function(){
      console.log('PEW');
});

イベントは #playerControls で発生し、その時点で.paust-btを探します。

jquery - JQuery トグル クラスにイベントを追加する