javascript - 在 AJAX 加载的部分 View (MVC4) 上使用自动完成 (Jquery)

Question

我有一个创建项目模型的 View ，其中包含(除其他外)公司相关数据表。

我添加了一个按钮，该按钮执行 AJAX 调用以检索局部 View 并将其添加到表中:

$("#addCompanyRoleProject").click(function () {
        cache: false,
        $.get('CompanyRoleProjectEntryRow', function (result) {

                $("#companyTable").append(result); // Add the row to the table

        }, "html").done(function (result) { 


            });

            return false;
        });

部分 View 是一个 ，其中一个 有一个输入字段:

<input class="company-role-project-company" type="text" data-containerPrefix="@ViewData["ContainerPrefix"]" />

我希望 ajax 接收到的部分 View 中的输入字段是一个自动完成 (http://jqueryui.com/autocomplete/)，以便用户能够从表的每一行的每个 <input> 的一组选项中进行选择。

我似乎无法在主视图中访问我的 AJAX 调用的对应字段。我已经尝试在成功函数和完成函数上使用“filter()”和“find()”。

我可以将我的 javascript 代码放在局部 View 中，但它会被复制，更不用说可能的 ID 冲突 =\

关于如何实现这一点有什么想法吗？

编辑:

我相信在我看来我已经正确引用了所有内容:

@section Scripts {
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")

    <<<< My JS code is here >>>>

}

在我的页面源代码中，我可以看到:

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

编辑 2:

我听从了 Darin Dimitrov 的建议，并在将结果附加到表中之后将其添加到 ajax 成功回调中:

$('input.company-role-project-company', result).autocomplete({
    ...define source etc...
});

但是当我在输入字段中输入内容时，它的行为就像一个普通的文本字段...... 我使用 ajax 调用的过程是否有问题:请求部分 View ，将其附加到表中，使其自动完成？

Answer 1

在将新的部分标记附加到 DOM 后，在 AJAX 成功回调中像这样尝试:

$('input.company-role-project-company', result).autocomplete({
    ...
});