jQuery无法识别Repeater新增元素，获取指定ID最后输入框name值总返回首个

1. 重复ID违反HTML规范：HTML要求页面内ID必须唯一，jQuery Repeater新增条目时会复制模板内容，导致多个id="inputID"的元素存在，ID选择器的默认行为只会匹配第一个找到的元素，加:last也不会生效。
2. 触发时机错误：直接绑定添加按钮的click事件时，回调触发时Repeater还未完成新DOM的插入渲染，此时查询到的还是新增前的DOM结构。

步骤1：修改模板HTML，移除重复ID，替换为类名 #

把原有模板内的输入框ID去掉，改用类名标识，避免ID冲突：

<div data-repeater-item>
    <!-- 移除id属性，添加class标识 -->
    <input type="text" name="text-input" class="repeater-input"/>
    <input data-repeater-delete type="button" value="Delete"/>
</div>

步骤2：使用Repeater官方提供的渲染完成事件获取新元素 #

不要自行绑定添加按钮的点击事件，改为在Repeater初始化时配置show回调，该回调会在新条目完全渲染到DOM后触发，还能直接拿到当前新增的条目元素：

<script>
$(document).ready(function() {
    // 初始化Repeater
    $('#kt_repeater_1').repeater({
        show: function () {
            // 这里的$(this)就是当前新增的条目DOM
            var nameOfLastInput = $(this).find('.repeater-input').attr('name');
            console.log(nameOfLastInput);
            // 保留原有默认展开动画
            $(this).slideDown();
        },
        hide: function (deleteElement) {
            // 保留原有删除逻辑
            $(this).slideUp(deleteElement);
        }
    });
});
</script>

可选方案：如果需要自行绑定点击事件，要加延迟等待DOM渲染完成 #

如果一定要绑定添加按钮的点击事件，可以加短延迟等待Repeater渲染完成后再查询：

$('#addElements').on('click', function() {
    setTimeout(() => {
        var nameOfLastInput = $(".repeater-input:last").attr("name");
        console.log(nameOfLastInput);
    }, 100);
});

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