Question

我有以下结构：

<div class="container">
    <div class="post">
        <div class="like liked"></div>
    </div>
</div>

这是我的JS：

$('.container .post .like:not(.liked)').on('click', function()
{
    // this gets fired even if the element has class "liked"
});

为什么JS会触发，即使元素具有“喜欢”类，如果它只有，如果它具有类“喜欢”，那么它会被激活吗？

Answer 1

不要使用jquery：

$('.container .post .like').not('.liked').on('click', function() {
    // this gets fired even if the element has class "liked"
});

Answer 2

使用：

$('.container .post .like').not('.liked').on('click', function()
{
    // this gets fired even if the element has class "liked"
});

或者，

$('.container .post .like :not(".liked")').on('click', function()
//                      ^^^ space between not selector
{
    // this gets fired even if the element has class "liked"
});

Answer 3

这是因为您的选择器不在引号中。

$('.container .post .like:not(".liked")').on('click', function(){
// do stuff
});

you can also use the jQuery .not

$('.container .post .like').not('.liked').on('click', function(){
// do stuff
});

编辑：添加了一个codepen.io示例：http://codepen.io/anon/pen/GJOLew

Answer 4

唯一的原因是动态添加了类liked。也就是说，在处理程序已经在DOM上注册就绪之后。

<强> Not working Demo

因此，在注册事件处理程序时，like的div没有liked类。因此，此事件有效，最终会在点击时触发。

使用事件委托来避免这种情况。

$('.container .post').on('click','.like:not(.liked)',function(){

})

<强> Working Demo

另一种选择是，

$('.container .post .like').on('click', function(){
    if(!$(this).hasClass('liked')){

    }
});

：不是（.class）不工作？

4 个答案: