jquery - クラスが動的に追加された jQuery select 要素

Question

クリックすると別のボタンにクラスが追加されるボタンがあります。次に、そのボタン用に設定されたセレクターがありますが、クラスが存在する場合のみです。最初のボタンがクリックされていない場合、2 番目のセレクターは無効になります。ただし、最初のボタンをクリックしても機能しません。

私はこれをカバーするのに慣れていると思っ.live()ていましたが、後で（一度live廃止されました）.on()これをカバーするでしょう。

私が何をする必要があるか知っている人はいますか？

jQuery

$('#button1').click(function(){
    $('#button2').addClass('active');
});

$('#button2.active').on('click', function(){
    alert("");
});

HTML

<input type="button" id="button1" value="Add Class" />
<input type="button" id="button2" value="Button with event listener" />

score 3 · Accepted Answer

クリックイベントを、DOM のロード時に存在するコンテナー要素にバインドし、.on() メソッドを使用してアクティブクラスをパラメーターとして渡す必要があります。以下の例は、両方のボタンをラップする「コンテナ」の id を持つ div を使用しています。

 $('#container').on('click', '.active', function() {
      alert('clicked');
 });

score 1 · Accepted Answer

.hasClass()を使用してこれを試すこともできます

$('#button2').on('click', function () {
    if ($(this).hasClass('active')) {
        alert("active");
    }
});

score 0 · Accepted Answer

このようにしてみてください

$('#button2').on('click', function(){
    if($(this).attr('class') == "active")
        alert("Active Clicked");
});

3 に答える 3