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在.info后代而不是<a>本身定义了<li>类，而您的选择器表示: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中查找不是信息的类

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

JSFiddle