jQuery 如何仅获取动态新增表单字段对应的最近一个匹配元素

你使用全局选择器 $("[name='textfield_label']") 定位元素时，会匹配页面上所有已存在的同名元素，而非仅匹配最新追加的目标行，自然无法单独操作最新新增的字段。

核心逻辑是避免用全局选择器查询动态追加的元素，在元素刚插入DOM时直接持有它的引用，精准定位其内部的关联节点。

具体修改点：

• 把原本直接append模板字符串的逻辑，先将模板转为jQuery对象再插入，直接拿到当前新增行的引用
• 基于当前新增行的引用，查找其内部的标签输入框、关联预览字段，直接绑定事件，完全不会干扰其他已存在的旧元素

注意：不推荐使用$("[name='textfield_label']").last()这类依赖DOM顺序的全局选择方式，一旦后续新增其他元素或调整DOM结构，很容易出现匹配错误，直接持有元素引用是最可靠的方案。

修改后的核心逻辑代码：

$('#add_form').on('click',function (e) {
    $('#form_holder').append(add_fields);
    $('#add_fields').on('change',function () {
        if($(this).val()=='text'){
            // 替换原来的全局查找逻辑：直接插入新行并持有引用
            const $newTextRow = $(text_field_append).appendTo('#form_holder');
            // 从当前新增的行内部查找元素，完全不会匹配到其他旧行
            const $labelInput = $newTextRow.find("[name='textfield_label']");
            const $nearestField = $newTextRow.find('.field');
            
            // 仅给当前新增的标签输入框绑定事件
            $labelInput.on('input',function(e){
                $nearestField.attr("placeholder", $(this).val());
                const fieldName = $(this).val().replace(/ /g,"_");
                $nearestField.attr("name", fieldName);
            });
        }
    })
})

• 动态追加的下拉框统一使用id="add_fields"不符合HTML id全局唯一的规范，后续点击Add Fields生成的新下拉框，会因为选择器$('#add_fields')仅匹配第一个元素，导致新下拉框的change事件绑定失效。可以去掉下拉框的id，改用类选择器+事件委托，或者为每次追加的下拉框生成唯一id。
• 原逻辑中每次切换下拉框选text值都会追加一行，若下拉框选完text后再次切换回其他值再切回text，会重复生成行，可根据业务逻辑增加判断逻辑。

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