jquery - 如果元素具有类“load”或子元素包含“.delete”，则不要触发

Question

这是HTML：

<ul>
   <li>This should fire</li>
   <li>This should not fire, but does <div class="delete">Delete</div></li>
   <li class="load">This does not fire as expected</li> 
</ul>

这是 jQuery

$('ul').on('click', 'li:not(.load):not(:has(.delete))', function() {
    alert('fire');
});

知道当 li 有一个带有 class 的子元素时如何防止 jQuery 触发.delete吗？

Answer 1

对我来说很好（小提琴）。也就是说，您使用了另一个开始li标签而不是结束标签......所以，您得到了一个意外的列表项。

<ul>
    <li>This should fire</li>
    <li>This should not fire, but does<div class="delete">Delete</div></li>
    <li class="load">This does not fire (as expected)</li> 
</ul>

Answer 2

试试下面的代码：

$('ul').on('click', 'li', function() {
   var currentLi = $(this);
   if(currentLi.find('.delete').length == 0 && !currentLi.hasClass('load')) {
       alert('fire');
       return false;
   }
});

Answer 3

像这样：

$('li:not(.load):not(:has(.delete))').on('click', function() {    
   alert('fire');
});