点击动态生成的<li>用jQuery填充输入框失效问题求助

问题场景 #

通过Ajax根据输入框值填充<ul>，实现类自动补全功能：点击<li>元素时将其值及ID填充回输入框。目前静态<li>可正常触发点击事件，但通过jQuery动态追加的<li>无法向输入框赋值。

视图代码 #

<input type="text" name="vendor_id" id="search_vendor">

<ul id="vendor_list"></ul>

原脚本代码 #

<script>
    $(document).ready(function(){

        $("#search_vendor").keyup(function(e) {

            if($(this).val().length > 0){
                $.ajax({
                    url: "/search_vendor_ajax",
                    data: { search_vendor: $(this).val() },
                    type: 'GET',
                    success: function(data){
                        $(data).each(function(i, value){
                            $('#vendor_list').append(
                                $('<li>')
                                    .append(value.vendor_name)
                                    .attr('id', value.id)
                                    .attr('class','vendor_li')
                            );
                        });
                    }
                });
            }
        });

        // 选择供应商
        $('li.vendor_li').on('click',function(){
            var content= $(this).text();
            $('#search_vendor').val(content);
        });
    });
</script>

问题原因 #

原代码直接给li.vendor_li绑定点击事件，这种方式仅对页面加载完成时已存在的DOM元素生效。动态生成的元素是后续追加到DOM中的，不会自动继承已绑定的事件。

解决方案：事件委托 #

将点击事件委托给静态存在的父元素（此处为#vendor_list），由父元素监听子元素的点击事件，这样动态生成的<li>也能正常触发事件：

// 选择供应商 - 改用事件委托绑定
$('#vendor_list').on('click', 'li.vendor_li', function(){
    var content = $(this).text();
    var vendorId = $(this).attr('id'); // 获取供应商ID
    $('#search_vendor').val(content);
    // 若需保存ID到表单，可添加隐藏输入框存储：
    // $('#hidden_vendor_id').val(vendorId);
});

额外优化建议 #

1. 避免重复追加元素：每次发起Ajax请求前清空#vendor_list，防止旧查询结果堆积：

if($(this).val().length > 0){
    $('#vendor_list').empty(); // 新增清空操作
    $.ajax({
        // ... 原Ajax配置
    });
}

2. 添加防抖处理：减少频繁按键导致的重复Ajax请求，降低服务器压力：

let debounceTimer;
$("#search_vendor").keyup(function(e) {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(() => {
        const inputVal = $(this).val();
        if(inputVal.length > 0){
            $('#vendor_list').empty();
            $.ajax({
                url: "/search_vendor_ajax",
                data: { search_vendor: inputVal },
                type: 'GET',
                success: function(data){
                    $(data).each(function(i, value){
                        $('#vendor_list').append(
                            $('<li>')
                                .text(value.vendor_name) // 改用text()避免嵌套HTML问题
                                .attr('id', value.id)
                                .attr('class','vendor_li')
                        );
                    });
                }
            });
        } else {
            $('#vendor_list').empty(); // 输入为空时清空列表
        }
    }, 300); // 300ms延迟，可根据需求调整
});

内容的提问来源于stack exchange，提问作者T.A.