动态生成表格中jQuery blur事件多次触发的解决方法咨询

看起来你碰到了动态生成表格里blur事件重复触发的麻烦，我帮你梳理下问题根源，再给你可行的解决方案：

问题根源分析 #

你当前的代码里有两个关键问题导致blur多次触发：

1. 事件委托重复绑定：如果这段$(document).on('blur','.rawproductrate',...)的绑定代码被多次执行（比如每次加载供应商数据、生成表格时都跑一遍），document上就会被绑定多个相同的事件处理函数，每次输入框失焦时，所有绑定的函数都会被触发，造成“多次触发”的现象。
2. 无效的事件解绑：你在事件处理里写的$('.rawproductrate').off('blur')完全起不到作用——因为你的事件是委托绑定在document上的，直接解绑元素本身的blur事件对委托事件没有任何影响，反而可能打乱其他逻辑。

另外还有个小问题：你循环生成表格时，像hsncode这类ID是重复的，这违反了HTML的ID唯一性规范，后续用ID选择器获取元素时很容易出错。

具体解决办法 #

1. 确保事件只绑定一次

把事件委托的代码改成“先解绑再绑定”的形式，这样即使绑定代码被多次执行，也不会重复绑定事件处理函数：

// 先移除document上绑定的对应blur事件，再重新绑定
$(document).off('blur', '.rawproductrate').on('blur','.rawproductrate',function(event){ 
    // 你的处理逻辑写在这里
});

2. 优化事件处理逻辑

去掉无效的阻止冒泡/默认行为代码，同时简化数值计算逻辑，改用基于行的元素查找（避免重复ID的问题）：

$(document).off('blur', '.rawproductrate').on('blur','.rawproductrate',function(event){ 
    var $currentInput = $(this);
    var $currentRow = $currentInput.closest('tr');
    var trId = $currentRow.data('id');

    // 从当前行内获取数量值，不用依赖可能重复的ID
    var quantity = $currentRow.find('.rawproductquantity').val();
    var rate = $currentInput.val().trim();

    // 验证单价不能为0或空
    if (!rate || parseFloat(rate) === 0) {
        alert("Raw Product Rate Cannot be Zero");
        $currentInput.focus(); // 强制输入框重新获得焦点，引导用户修正
        return;
    }

    // 计算总价，处理非数字情况
    var quantityNum = parseFloat(quantity) || 0;
    var rateNum = parseFloat(rate) || 0;
    var totalPrice = (quantityNum * rateNum).toFixed(2);

    // 给当前行的总价输入框赋值
    $currentRow.find('.rawproductprice').val(totalPrice);
});

3. 修正动态生成的HTML代码

去掉重复的ID（比如hsncode、rawproductname这些循环里重复生成的ID），只保留唯一的ID（比如rawproductquantity_'+j+'这类带随机数的），或者直接用类选择器来定位元素，这样更可靠：

for(var i=0;i< data.supplierdetails.length;i++){ 
    var j = (Math.floor(Math.random() * 100000000) + 100000000).toString().substring(1); 
    supplierdetailshtml += '<tr data-id="'+j+'">'; 
    var description = data.supplierdetails[i].description; 
    // 去掉重复的id="rawproductname"
    supplierdetailshtml+= '<td><input type="text" name="rawproductname[]" value ="'+description+'" class="form-control rawproductname" readonly="true"/></td>'; 
    // 去掉重复的id="hsncode"
    supplierdetailshtml+= '<td><input type="text" name="hsncode[]" class="form-control hsncode"/></td>'; 
    var quantity = data.supplierdetails[i].quantity; 
    supplierdetailshtml+= '<td><input type="text" name="rawproductquantity[]" id="rawproductquantity_'+j+'" value ="'+quantity+'" class="form-control rawproductquantity" readonly="true"/></td>'; 
    var unitcode = data.supplierdetails[i].unitcode; 
    // 去掉重复的id="rawproductunitcode"
    supplierdetailshtml+= '<td><input type="text" name="rawproductunitcode[]" value ="'+unitcode+'" class="form-control rawproductunitcode" readonly="true"/></td>'; 
    supplierdetailshtml+='<td><input type="text" name="rawproductrate[]" id="rawproductrate_'+j+'" value="0.00" class="form-control rawproductrate"/></td>'; 
    supplierdetailshtml+='<td><input type="text" name="rawproductprice[]" id="rawproductprice_'+j+'" value="0.00" class="form-control rawproductprice"/></td>'; 
    supplierdetailshtml+= '<td><input type="text" name="rawproductgst[]" id="rawproductgst_'+j+'" value="0.00" class="form-control rawproductgst"/></td></tr>'; 
} 

这样调整后，blur事件就不会再多次触发，同时代码的可靠性也会提升。

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