如何用jQuery监听contenteditable td单元格变更？change函数是否生效？

嘿，这个场景我之前做项目时刚好踩过坑！直接说结论：jQuery的change事件默认是识别不了contenteditable单元格的修改的。

原因很简单：change事件原本是为表单控件（比如<input>、<select>这类）设计的，只有当这些控件的内容改变且失去焦点时才会触发。但对于设置了contenteditable="true"的<td>元素，浏览器并不会自动触发change事件，所以你直接绑定change是没效果的。

那该怎么实现需求呢？给你两个常用的解决方案：

方案一：使用blur事件（推荐，适合编辑完成后提交） #

当用户编辑完单元格并点击其他地方（失去焦点）时触发，刚好符合“修改完成后调用接口”的场景，还能避免频繁请求后端。

示例代码：

// 给所有.editQty单元格绑定blur事件
$('.editQty').on('blur', function() {
  const $this = $(this);
  const newQty = $this.text().trim();
  const originalQty = $this.data('original'); // 提前存好初始值，比如<td data-original="1000">

  // 先校验是否是数字（根据你的需求调整规则）
  if (!/^\d+$/.test(newQty)) {
    alert('请输入有效的数字！');
    $this.text(originalQty); // 恢复原来的数值
    return;
  }

  // 如果内容没变化，直接跳过请求
  if (newQty === originalQty) return;

  // 调用后端接口
  $.ajax({
    url: '/你的接口地址',
    method: 'POST',
    data: { 
      qty: newQty, 
      id: /* 这里传对应行的唯一标识，方便后端定位数据 */ 
    },
    beforeSend: function() {
      $this.prop('contenteditable', false); // 提交时禁用编辑，防止重复操作
    },
    success: function(res) {
      if (res.success) {
        console.log('修改成功！');
        $this.data('original', newQty); // 更新初始值
      } else {
        alert('修改失败，请重试');
        $this.text(originalQty); // 失败后恢复原数值
      }
    },
    error: function() {
      alert('网络错误，请稍后再试');
      $this.text(originalQty);
    },
    complete: function() {
      $this.prop('contenteditable', true); // 恢复编辑权限
    }
  });
});

方案二：使用input事件（实时监听） #

如果需要用户每输入一个字符就触发校验或请求（比如实时库存校验），可以用input事件，它会在内容变化时立即触发：

$('.editQty').on('input', function() {
  const currentValue = $(this).text().trim();
  // 实时过滤非数字内容，避免无效输入
  $(this).text(currentValue.replace(/[^0-9]/g, ''));
});

额外提示 #

• 提前把单元格的初始值存在data-original属性里，修改失败时可以快速恢复，比硬编码原数值更灵活；
• 提交请求时记得加个禁用编辑的逻辑，防止用户在请求未完成时重复修改，造成数据混乱。

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