單擊父級，但其子級之一除外-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');
});