javascript - Jquery 自动完成功能在动态加载的部分 View 中不会被触发

Question

我在动态加载的部分 View 中执行 jquery 时遇到问题。

局部 View

<input type="text" id="producerSearch" select-box-search-performer="true" select-box-search-url="TestUrl" select-box-search-performertype="Producer" select-box-search-destination="#Destination")" />

Jquery

<script>
    $(document).ajaxSuccess(function() {
        $(":input[select-box-search-performer]").each(function () {
            var $element = $(this);
            $(this).autocomplete({
                source: function (request) {
                    var url = $element.attr("select-box-search-url");
                    var destSelect = $element.attr("select-box-search-destination");
                    var performertype =  $element.attr("select-box-search-performertype");
                    $.ajax({
                        async: false,
                        cache: false,
                        type: "POST",
                        url: url,
                        data: { "term": request.term, "productId":  @Model.ProductModel.ProductId, "performerType": performertype},
                        success: function (data) {
                            $(destSelect).empty();
                            for (var i = 0; i < data.length ; i++) {
                                $(destSelect).
                                    append($("<option></option>").attr("value", data[i].ID).text(data[i].Name));
                            }
                        }
                    });
                }
            });
        });
    });
</script>

一些讨论说“需要包含ajaxSuccess(如上面的代码)。但是，这不会在动态加载的部分 View 上触发jquery。

-艾伦-

Answer 1

嗯，我想既然你有一个局部 View ，它是动态加载的。由于动态内容加载是一个ajax业务，因此每当您加载动态 View 时，首先会加载内容，然后会触发ajaxsuccess，因此$(":input[select-box- search-performer]").each(function) 在那一刻起作用，而不是在那之前。

您需要做的是检查渲染动态 View 的逻辑，并在部分 View 渲染时从那里触发回调，然后执行此代码。