Question

我的表格中包含复选框。我希望在这些复选框上有更改事件。表行上也必须有一个点击监听器。

现在我点击tr上的点击监听器并更改input上的监听器，但是当输入更改时，它首先触发tr上的点击监听器，然后更改input

它应该只捕获change侦听器。我怎样才能解决这个问题？

这是代码 -

<table class="table table-hover category-select" id="cat-table">
  <thead>
    <tr>
      <th>#</th>
      <th></th>
      <th>Category Name</th>
      <th>Unit</th>
      <th class="text-center">Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr class="selected">
      <td>1</td>
      <td>3</td>
      <td>Steel</td>
      <td>Tonnes</td>
      <td class="text-center">
        <label class="switch switch-green">
          <input type="checkbox" class="switch-input" />
          <span class="switch-label" data-on="Active" data-off="Inactive"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>4</td>
      <td>Cement</td>
      <td>Bags</td>
      <td class="text-center">
        <label class="switch switch-green">
          <input type="checkbox" class="switch-input" />
          <span class="switch-label" data-on="Active" data-off="Inactive"></span>
          <span class="switch-handle"></span>
        </label>
      </td>
    </tr>

  </tbody>
</table>


$catBody.on('click', 'tr', function(e) {
   alert('in tr');
 });

 $catBody.on('change', 'input', function(e) {
   e.stopPropagation();
   alert('in input');
 });

这里是demo DEMO 1

Answer 1

使用stopPropagation()标记空白点击事件。

$catBody.on('click', 'label', function(e) {
  e.stopPropagation();
});

DEMO

捕获更改事件内部tr不适用于自定义复选框

1 个答案: