jquery - 动态添加类的jQuery选择元素

Question

我有一个按钮，单击该按钮会将一个类添加到另一个按钮。然后我有一个为该按钮设置的选择器，但仅在类存在时。如果第一个按钮没有被点击，第二个的选择器应该是无效的。但是，即使我单击了第一个按钮，它仍然无法正常工作。

我以为.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

您需要将 click 事件绑定到加载 DOM 时存在的容器元素，然后使用 .on() 方法将活动类作为参数传递。下面的示例是一个 id 为“container”的 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