Jquery 为什么新添加的输入不调用自动完成函数？

我已经在视图中的一个输入上实现了自动完成功能，现在我想允许用户通过（js中的add按钮）添加更多输入问题是新添加的输入没有调用自动完成功能为什么

自动完成功能

$(document).ready(function () {
            $(".AOI").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "/Test/SearchAOI",
                        type: "POST",
                        dataType: "json",
                        data: { Prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return { label: item.AOIName, value: item.AOIName };
                            }))

                        }
                    })
                },
                messages: {
                    noResults: '',
                    results: function (resultsCount) { }
                }
            });
        })

允许用户添加更多输入的功能

var areaIndex = "b";
        $("#addAOI").click(function () {
            //create the elements representing the new object, giving them a fake indexer
            areaIndex = areaIndex + "b";
            $("#AOIFields").append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
        })

var areaIndex=“b”；
$（“#添加AOI”）。单击（函数（）{
//创建表示新对象的元素，给它们一个假索引器
areaIndex=areaIndex+b；
$（“#AOIFields”）。追加（“”）；
})

部分视图

---

您需要将autocomplete绑定到新的add元素，以便执行此操作

$("#addAOI").click(function () {
    //create the elements representing the new object, giving them a fake indexer
    areaIndex = areaIndex + "b";
    var $container = $("#AOIFields");
    $container.append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
    $container.find(".AOI").last().autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Test/SearchAOI",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.AOIName, value: item.AOIName };
                    }))

                }
            })
        },
        messages: {
            noResults: '',
            results: function (resultsCount) { }
        }
    });
})

$（“#addAOI”）。单击（函数（）{
//创建表示新对象的元素，给它们一个假索引器
areaIndex=areaIndex+b；
var$container=$（“#AOIFields”）；
$container.append（“”）；
$container.find（“.AOI”）.last（）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“/Test/SearchAOI”，
类型：“POST”，
数据类型：“json”，
数据：{前缀：request.term}，
成功：功能（数据）{
响应（$.map）（数据、功能（项）{
返回{label:item.AOIName，value:item.AOIName}；
}))
}
})
},
信息：{
结果：''，
结果：函数（resultcount）{}
}
});
})

---

为了获得更好的结果，您可以将自动完成选项存储在var中，您需要在新添加的元素上实例化

autocomplete（）

逻辑。当前，仅在加载DOM时将其应用于DOM中的元素

最简单的方法是将自动完成逻辑提取到它自己的函数中，您可以根据需要调用该函数，如下所示：

函数定义完成（$parent）{
$parent.find（“.AOI”）.autocomplete({
来源：功能（请求、响应）{
$.ajax({
url:“/Test/SearchAOI”，
类型：“POST”，
数据类型：“json”，
数据：{
前缀：request.term
},
成功：功能（数据）{
响应（$.map）（数据、功能（项）{
返回{
标签：item.AOIName，
值：item.AOIName
};
}));
}
})
},
信息：{
结果：''，
结果：函数（resultcount）{}
}
});
}
//装载时：
定义完成（$（文件））；
//点击：
$（“#添加AOI”）。单击（函数（）{
areaIndex=areaIndex+b；
var$html=$（“”）。appendTo（'#AOIFields'）；
定义完成（$html）
})

您需要在新添加的元素上实例化

autocomplete（）

逻辑。您当前仅将其应用于加载时DOM中的元素。事件仅分配给分配时存在的项。更多信息请点击这里：谢谢@Rory McCrossan这是对的！你能写下你的评论作为回答，这样我就可以接受它了吗？很高兴你让它工作了。我加上它作为你的答案

$("#addAOI").click(function () {
    //create the elements representing the new object, giving them a fake indexer
    areaIndex = areaIndex + "b";
    var $container = $("#AOIFields");
    $container.append("<td><input type='hidden' name='AOI.Index' value='"+areaIndex+"' style='display:none;' /> <input type='text' class='form-control AOI' name='AOI["+areaIndex+"]' /></td>");
    $container.find(".AOI").last().autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Test/SearchAOI",
                type: "POST",
                dataType: "json",
                data: { Prefix: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.AOIName, value: item.AOIName };
                    }))

                }
            })
        },
        messages: {
            noResults: '',
            results: function (resultsCount) { }
        }
    });
})