Question

这是我的小提琴link。

我希望在点击父框时执行一些操作，但只有一个具有类.notClickableCol的子项。我使用了:not()，但目前它无效。

当此文字（＆＃34; Not Clickable＆＃34;）没有<span>标记时，它正在工作。

有什么想法吗？

HTML / CSS / Jquery的：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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").on('click', '.clickableCol', function () {
    alert('success');
});

Answer 3

你可以这样做。

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

<强> UPDATED FIDDLE

Answer 4

除了只排除notclickablecol之外，你可以告诉它只有在使用has选择器具有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');
});

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

Answer 5

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

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

单击其中一个子 - jquery之外的父项

5 个答案: