javascript - 捕获 tr 中的更改事件不适用于自定义复选框

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 1

Answer 1

使用 stopPropagation() 添加空白点击事件到标签。

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

DEMO