javascript - 单击除其子级之一之外的父级 - jquery

Question

这是我的 fiddle link .

我想在单击父框时执行一些操作，但它的一个子级除外 .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.