动态创建input的blur事件异常：失效或多次触发求助

我来帮你搞定这个困扰～首先得说，你之前用全局isBound变量的思路有个核心问题：全局变量会让所有input共享同一个绑定状态，要么只有第一个能绑定，要么重置后会重复绑定导致blur多次触发。下面给你两个靠谱的解决方案，优先推荐事件委托的方式，特别适合动态创建元素的场景。

方案一：事件委托（最推荐） #

因为你的表格是动态创建input的，直接给单个input绑定事件很容易失效或者重复绑定。事件委托通过把事件绑定到稳定的父元素（比如表格本身），利用事件冒泡机制来处理所有子元素的blur事件，不管是初始的还是后来新增的input都能生效，而且绝对不会重复绑定。

代码示例：

$(document).ready(function () {
  // 初始化输入掩码
  $(".inputsTable").mask("#.##0,00", { reverse: true });

  // 绑定blur事件到表格（父元素），委托给所有.inputsTable元素
  $('table').on('blur', '.inputsTable', function () {
    // 这里执行你的计算逻辑
    alert($(this).val());
  });
});

为什么这个方案有效？ #

• 只需要绑定一次事件到父元素，不需要在input事件里反复判断绑定状态
• 动态新增的input自动继承父元素的事件监听，不需要额外处理
• 完全避免了重复绑定blur事件的问题，自然不会出现多次触发的情况

方案二：给单个Input标记绑定状态 #

如果你不想用事件委托，也可以给每个input单独标记是否已经绑定了blur事件，用元素的自定义data属性代替全局变量，这样每个input的绑定状态是独立的，不会互相影响。

代码示例：

$(document).ready(function () {
  $(".inputsTable").mask("#.##0,00", { reverse: true });

  $('.inputsTable').on('input propertychange paste', function () {
    const $input = $(this);
    // 检查当前input是否已经绑定过blur事件
    if (!$input.data('blur-bound')) {
      $input.data('blur-bound', true);
      $input.on('blur', function () {
        // 执行计算逻辑
        alert($(this).val());
      });
    }
  });

  // 注意：如果是动态新增的input，创建后需要手动初始化掩码和绑定上述事件
});

这个方案的注意点 #

• 动态新增input时，需要重新给新元素绑定input propertychange paste事件，或者在创建元素时直接初始化绑定状态
• 相比事件委托，代码稍显繁琐，适合场景比较简单的情况

为什么你之前的方案会出问题？ #

• 用全局isBound变量：第一个input触发input事件后，isBound设为true，后续所有input都无法再绑定blur事件
• 重置isBound：同一个input每次触发input事件都会重新绑定一次blur事件，导致一个input上绑定了多个blur回调，触发时就会多次执行

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