js 动态生成 input 的绑定事件 blur 无效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1415480

☯ 背景描述

• 今天在进行代码编写时，我需要根据ajax返回的数据动态生成一个表格，而针对于其中的input标签，要求设置失去焦点的blur事件
• 需要实现的界面截图如下：

• 最开始编写的 js 代码如下：

	/**
     * 当sku库存量变化时，对应总库存进行更新
     */
    $(".input-sku-stock").blur(function () {
        var input_goods_stock = 0;
        $('.input-sku-stock').each(function () {
            input_goods_stock += Number($(this).val());
        });
        $(".input-goods_stock").val(input_goods_stock);
    });

• 但是发现，静态的表格是可以正常实现的，而动态新生成的却无法触发blur事件 因为测试失败后，转而考虑新的写法，且可以正常实现

[注:] 作为一个PHPer，自然对前端知识不够了解，但是这样确实能用，也希望道友帮忙指摘，多谢！

ி 附录

• 1.针对我的问题，求助度娘，发现了下面的一个帖子，可作参考 动态添加的blur事件失效 [问题点数：60分，结帖人lawrendc] 时间相当久远...
• 2.最接近解决需求的文章如下，建议可自行测试 动态生成input绑定事件无效如：blur

意见：异步导致绑定事件失败，需使用全局绑定事件

• 3.w3school 文档 - onblur 事件 这就是官方文档