jQuery autocomplete在动态生成的输入文本框中失效如何解决？（含AJAX调用）

问题根源 #

• ID属性是唯一标识，克隆元素重复使用#school_name会导致选择器仅匹配首个元素
• 原代码每次触发键盘/焦点/点击事件时重复初始化autocomplete，逻辑冗余且易引发冲突
• 通过$(document).on()绑定autocompleteselect/autocompletechange属于过度委托，且与autocomplete内置回调机制冲突

修正方案 #

1. 调整HTML选择器 #

将原输入框的id="school_name"改为class="school_name"，避免克隆后ID重复：

<input type="text" class="school_name" name="school_name" />

2. 封装Autocomplete初始化函数 #

把初始化逻辑封装为可复用函数，方便给新克隆的元素调用：

// 封装初始化函数，接收目标元素作为参数
function initSchoolAutocomplete($element) {
    $element.autocomplete({
        source: function(request, response) {
            $.getJSON(
                "https://api.apispreadsheets.com/data/JIbRHVPsNwrMkmav/?dataFormat=column&query=select Sxoleio,Moria from JIbRHVPsNwrMkmav where MM_ID = " + request.term,
                function(data) {
                    response(data['Sxoleio']);
                }
            );
        },
        select: function(event, ui) {
            $(this).val(ui.item.value);
            return false;
        },
        change: function(event, ui) {
            $(this).closest('.school').find('#school_points').val(7);
        },
        minLength: 3,
        delay: 250
    });
}

// 初始化页面中首个输入框
initSchoolAutocomplete($('.school_name'));

3. 处理克隆元素的初始化 #

假设你通过按钮触发克隆操作，在克隆完成后，主动给新生成的输入框初始化autocomplete：

// 示例克隆逻辑（请根据实际克隆代码调整）
$('.clone-btn').on('click', function() {
    // 克隆包含输入框的父容器
    var $newSchool = $('.school').first().clone();
    // 清空克隆输入框的内容（可选操作）
    $newSchool.find('.school_name').val('');
    // 将克隆容器添加到页面指定位置
    $('.container').append($newSchool);
    // 初始化新克隆输入框的autocomplete功能
    initSchoolAutocomplete($newSchool.find('.school_name'));
});

关键修改说明 #

• 用class选择器替代ID，彻底解决克隆元素的选择器冲突问题
• 封装初始化函数，避免重复编写逻辑，同时实现精准的单个元素初始化
• 将select/change回调直接写入autocomplete配置，消除事件委托带来的冲突
• 克隆后主动触发初始化，确保新生成的输入框拥有完整的autocomplete功能

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