jQuery中动态添加的.add-row按钮点击无响应问题求助

问题原因 #

你当前用$(".add-row").click()绑定点击事件，这种方式只会给页面加载完成时已经存在的.add-row元素绑定事件。后续通过JS动态生成的新按钮，并没有被绑定这个点击事件，所以点击后没有反应。

解决方案：使用事件委托 #

利用jQuery的事件委托机制，把点击事件绑定到一个**始终存在的父级元素（或document）**上，监听子元素的点击行为。这样不管是初始的还是动态新增的.add-row按钮，只要匹配选择器，点击时都会触发事件。

同时还要修正你代码里的两个小问题：

• 模板字符串里多了一个闭合的</div>，会导致DOM结构混乱
• button_identifier变量未定义，需要生成唯一的标识，比如用当前已有的.add-row按钮数量来命名

修正后的完整代码 #

HTML部分

<div>
    <label for="add_row-0"></label><br>
    <button type="button" class="add-row">Add Another Item</button>
</div>

JavaScript部分

$(document).ready(function(){
    // 使用事件委托绑定点击事件
    $(document).on('click', '.add-row', function(){
        // 生成唯一的标识符，基于当前按钮数量
        const buttonCount = $('.add-row').length;
        const buttonIdentifier = `add_row-${buttonCount}`;
        
        // 追加新的DOM元素，修正多余的</div>
        $(this).parent().after(`
            <div>
                <label for="${buttonIdentifier}"></label><br>
                <button type="button" class="add-row">Add Another Item</button>
            </div>
        `);
    });
});

补充说明 #

• 事件委托通过on()方法实现，第一个参数是事件类型，第二个是目标元素选择器，第三个是事件处理函数
• 用$(this).parent().after()替代$(".add-row").last().after()，可以更精准地在当前点击按钮的父元素后面追加新内容，避免选择错误
• 生成buttonIdentifier是为了保证每个label的for属性唯一，你可以根据实际表单需求调整对应关联的元素id

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