单击父级，但其子级之一除外-jQuery

Question

这是我的小提琴链接 。

我想在单击父框时执行一些操作，但其父级为.notClickableCol子级.notClickableCol 。 我使用了:not() ，但是目前无法正常工作。

当此文本（“不可点击”）没有<span>标记时，它就可以工作。

有任何想法吗？

HTML / CSS / jQuery的：

 jQuery(".row").on('click', ':not(.notClickableCol)', function() { alert('success'); }); 

 .row { margin-bottom:15px; border-bottom:1px solid #ccc; } .row { width:150px; height:150px; display:inline-block; vertical-align:top; text-align:center; color:#fff; font-family:Arial; font-weight:bold; margin-right:10px; background:#ff6777; margin-left:50px; } .clickableCol { display:block; cursor:pointer; margin-top:45px; margin-bottom:20px; color:#000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col"> <span class="clickableCol">Clickable</span> </div> <div class="col"> <span class="notClickableCol">Not Clickable</span> </div> </div> <div class="row"> <div class="col"> <span class="clickableCol">Clickable</span> </div> <div class="col"> <span class="notClickableCol">Not Clickable</span> </div> </div> <div class="row"> <div class="col"> <span class="clickableCol">Clickable</span> </div> <div class="col"> <span class="notClickableCol">Not Clickable</span> </div> </div> 

Answer 1

您的选择器范围太广。 我用.col代替.row ：

jQuery(".col :not(.notClickableCol)").on("click", function () {
    alert('success');
});

这是工作中的小提琴 。

---

您也可以只clickableCol并将.not()放在一起：

jQuery(".clickableCol").on("click", function() {
  alert('success');
});

这是另一个工作的小提琴。

Answer 2

您为什么不专注于clickable元素？ 像这样：

 jQuery(".row").on('click', '.clickableCol', function () {
    alert('success');
});

Answer 3

您可以按照以下步骤进行操作。

jQuery(".row").click(function (e) {
    if (!$(e.target).hasClass('notClickableCol')) {
        alert('success');
    }
});

更新场

Answer 4

您可以使用has选择器告诉它仅在具有clickablecol类时才注册notclickablecol：

/* For a clickable col inside this row, not every clickableCol
that might be in another table */
jQuery(".row").on('click', ':has(.clickableCol)', function () {
    alert('success');
});

您可以仅在.clickableCol类上使用onclick事件，但这并不好，因为在使用该类单击另一个col时可能需要其他操作。

Answer 5

应该用定义的类描述不跨越...

jQuery(".row").on('click', 'span:not(.notClickableCol)', function() {
  alert('success');
});