Question

我有选择器如下：

$('#codes-datatable tbody').on('click', 'tr', function () {});

我不希望按钮触发此选择器。例如。我在桌子里面有一个按钮：

<button class="btn">Button</button>

我已经尝试过多次与.not('.btn')和:not(.btn)的组合，但都没有成功。

请帮忙。

Answer 1

防止这种情况的一种方法是在事件绑定发生在tr之后再添加一条语句。

此声明将阻止事件的传播，并且仅针对.btn：

$('#codes-datatable tbody tr').on('click', function() {
  alert('hello');
});

$('#codes-datatable tbody .btn').on('click', function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="codes-datatable">
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td><button class="btn">Button</button></td>
    </tr>
  </tbody>
</table>

Answer 2

使用事件委派，您仍然有机会测试event.target属性以根据实际点击的元素处理事件。

// Listen to event on <div> when coming from a <p> element
$('div').on('click', 'p', function (e) {
   // Only log if the actual target hasn't a "btn" class.
   // Put whatever selector matches elements to filter
   if (!$(e.target).is('.btn')) {
      console.log(
         "Something that doesn't have the 'btn' class set has been clicked!"
      );
   }
   // Process event …
});

br{display: inline-block; margin: 20px 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <p>
    »Hasn't btn class«
    <br>
    <span class="btn">»Has btn class«</span>
  </p>
</div>

jquery选择器，如何不在select选择器中选择某个类

2 个答案: