Блог

Вот моя ссылка на скрипку.

Я хочу выполнить некоторые действия при нажатии на родительское поле, кроме его одного дочернего элемента с классом .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>  

Ваш селектор слишком широк. Я бы использовал .col вместо .row :

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

Вот рабочая скрипка.

Вы также могли бы просто clickableCol и отбросить .not() все вместе:

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

Вот еще одна рабочая скрипка.

Почему бы вам не сосредоточиться на интерактивном элементе? вот так:

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

Вы можете сделать это следующим образом.

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

ОБНОВЛЕННАЯ СКРИПКА

Вместо исключения только notclickablecol, вы можете указать ему регистрироваться только тогда, когда у него есть класс clickablecol, используя селектор has:

 /* 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, но это нехорошо, потому что вам может потребоваться другое действие, когда вы нажимаете на другой столбец с этим классом.

Должно описывать не диапазон с определенным классом…

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