點擊家長除了其中的一個孩子 - jquery

Question

這是我的小提琴。

我想在點擊父框時做一些操作，除了它的一個子類.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'); 
}); 

這裏的a working fiddle。

---

你也只是剛剛clickableCol，丟棄.not()一起：

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

Here's another working fiddle.

Answer 2

你可以像下面。

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

UPDATED FIDDLE

Answer 3

你爲什麼不集中，而在可點擊的元素？像這樣：

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

Answer 4

而是僅排除了notclickablecol的，你可以告訴它只能註冊時，它具有使用有選擇的類clickablecol：

/* 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'); 
}); 

你可以只上使用onclick事件.clickableCol類，但這並不好，因爲當您單擊此類的另一個列時，可能需要執行另一個操作。

Answer 5

應說明未定義的類跨越...

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