jQuery的不選擇器不能在子元素上工作？

Question

$(document).on('click', '#ul li:not(.info)', function(){

    alert();
});

我的HTML是這樣的

<ul id="ul">
<li></li>
<li><a href="#" class="info"></li>
</ul>

為什么當我單擊.info時仍然觸發？

Answer 1

因為您的HTML在<a>后代而不是<li>本身上定義了.info類，而選擇器表示:not(.info) ，這意味着<li>沒有.info類。

嘗試以下方法：

$(document).on('click', '#ul li:not(:has(.info))', function(){
    alert();
});

或者，您可以簡單地將.info類移動到<li>本身：

<li class="info"><a href="#"></li>

參見jQuery的has和Fiddle

Answer 2

你能做到這一點並嘗試

$(document).on('click', '#ul li a:not(.info)', function(){

    alert();
});

Answer 3

#ul li:not(.info)在li中查找不是info的類

#ul li a:not(.info) will give you the right result

的jsfiddle