jQuery点击复选框发送状态时AJAX请求重复触发如何解决

问题根源 #

• 重复绑定触发事件：你HTML代码里<td>和内部的<input>都加了.toggle-checkbox类，你绑定的是所有该类元素的change事件，点击复选框时，input的change事件触发后会冒泡到父级td，导致事件被触发两次。
• $row变量未定义：你的JS代码里直接使用了$row但没有预先赋值，第一次td触发事件时，$row默认指向全局缓存的首行元素，所以拿到的是首行客户ID1000，第二次input触发事件时才能拿到当前行的正确ID。
• 潜在写法错误：原代码里的$document如果没有提前赋值为$(document)，也会导致异常。

修复方案 #

1. 移除<td>上的.toggle-checkbox类，只保留复选框input上的该类，避免父级元素触发事件
2. 补全获取当前行$row的逻辑，从触发事件的元素向上查找最近的行节点
3. 添加事件阻止冒泡逻辑，彻底避免冒泡触发多余请求

修改后代码 #

JavaScript代码 #

// 未提前定义$document的情况下，统一写为$(document)
$(document).on('change', 'input.toggle-checkbox', function(e) {
  // 阻止事件冒泡，彻底避免父级元素触发多余事件
  e.stopPropagation();
  var $this = $(this);
  // 补全获取当前点击行节点的逻辑
  var $row = $this.closest('tr.test-row');
  var customerid = $row.data('customerid');
  var checkState = $this.is(':checked') ? 1 : 0;
  
  $.ajax({
    url: base_url + "testurl",
    type: "GET",
    data: {
      cid: customerid,
      checkbox: checkState
    },
    success: function(result) {
      console.log('succesful change');
    },
    error: function(xhr, status, error) {
      console.log('unsuccesful change');
    }
  });
});

HTML代码（仅需移除td上的toggle-checkbox类即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="test-row" data-customerid="1000">
  <td data-content="Customer ID" class="" style="max-width:700px">1000</td>
  <!-- 移除td标签上的toggle-checkbox类 -->
  <td data-content="">
    <div class="custom-control custom-switch no-click">
      <input type="checkbox" checked="checked" class="custom-control-input toggle-checkbox" id="">
      <label class="custom-control-label" for="">&nbsp;</label>
    </div>
  </td>
</tr>

内容的提问来源于stack exchange，提问作者Haruko Jahuno