jquery - 为什么新添加的输入没有调用自动完成功能？

Question

我现在已经正确地在 View 中的一个输入上实现了自动完成功能我想允许用户通过(在 js 中添加按钮)添加更多输入问题是新添加的输入没有调用自动完成功能为什么？

自动完成功能

$(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>");
        })

部分 View

         <input type="hidden" name="AOI.Index" value="123"style="display:none"/>

                        <input type="text" class="form-control AOI" name="AOI[123]" />
                    </td>
                </tr>

Answer 1

你需要将自动完成绑定(bind)到新的添加元素，这样你就可以做

$("#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) { }
        }
    });
})

为了获得更好的结果，您可以将自动完成选项存储在 var 中