hasClass('disabled') 在 .addClass('disabled') 之后不起作用答案

【问题标题】：hasClass('disabled') not working after .addClass('disabled')hasClass('disabled') 在 .addClass('disabled') 之后不起作用
【发布时间】：2013-10-03 23:43:29
【问题描述】：

选中后，hasClass 验证工作正常。

<div class="row dis">
    <input class="contact button selected" value="Contact Us">
</div>

但是，如果我通过 jquery 删除所选内容：

<div class="row dis">
    <input class="contact button" value="Contact Us">
</div>

if (!$('.dis > .contact').hasClass('disabled')) {
    $("input.contact").click(function() {

        alert('---');
        $('.contact').addClass('disabled');

    });
}

hasClass 在$('.contact').addClass('disabled'); 之后仍然找不到禁用的类。

所以，我只想要第一个警报。

演示：

http://jsfiddle.net/dWGNJ/2/

【问题讨论】：

$('.dis > .contact').hasClass('disabled') 返回匹配的元素此时。它不会自动绑定到新元素，因为它们添加了一个类。您可以绑定到“全部”.dis > .contact（并检查处理程序中的类）和/或使用delegated events 可能更好。
如果您要绑定到可以动态更改的类，则需要使用带有.on() 的事件委托。
@Barmar - 不是真的，只需将条件移动到事件处理程序内部就足够了。
@adeneo 这基本上就是.on() 自动执行的操作。
@Barmar - 基本上，是的！从技术上讲，它将事件处理程序移动到父元素，这在这里似乎没有必要？

标签： javascript jquery

【解决方案1】：

你可以这样做..

$('input.contact').on('click',function(){

    if( !$(this).hasClass('disabled') )
    {
        alert('---');
        $(this).addClass('disabled');
    }
});

基本上，当单击input.contact 时，检查它是否具有类.disabled - 如果它没有则触发alert 并添加类.disabled - 这反过来会阻止它触发第二个被点击的时间

或者您可以采用更优雅的方式：

$('.dis').on('click','input.contact:not(.disabled)',function(){
    alert('---');
    $('.contact').addClass('disabled');
});

同样的概念。

【讨论】：

【解决方案2】：

您的 JS 运行时没有 .disabled 元素，因此，没有 .contact 与 click() 绑定。

【讨论】：