javascript - JQuery Cascade 函数在更改事件后不会立即触发

Question

在 Ajax.BeginForm 提交后，dropdownlist 级联 Change() 不会立即触发。

生成新 DropDownList 的 View :

@model Heelp.ViewModels.CreateAdCategoryTypeViewModel
@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace }, new { @id = "categoryTypeForm" }))
{
    @Html.HiddenFor(m => m.Category_Id)

    @Html.DisplayNameFor(m => m.CategoryType_Id)
    @Html.DropDownListFor(m => m.CategoryType_Id, Model.CategoryList, HeelpResources.DropdownlistCategoryFirstRecord)
    @Html.ValidationMessageFor(m => m.CategoryType_Id)
}

一次sumbit后，生成的View为:

@model Heelp.ViewModels.CreateAdCarViewModel

@using (Html.BeginForm()) {

<fieldset>
    <legend>Car</legend>

   <div id="makes">
        @Html.DisplayNameFor(m => m.Make_Id)
        @Html.DropDownListFor(m => m.Make_Id, Model.MakeList, HeelpResources.DropdownlistMakeFirstRecord)
        @Html.ValidationMessageFor(m => m.Make_Id)
    </div>
    <div id="models">
        @Html.DisplayNameFor(m => m.Model_Id)
        @Html.DropDownListFor(m => m.Model_Id, Model.ModelList)
        @Html.ValidationMessageFor(m => m.Model_Id)
    </div>        
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

此时，当进行更改以填充模型列表时，我有一个级联函数可以触发:

$(document).ready(function () {
    $(document).on("change", "#Make_Id", function () {
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });
    });
});

级联函数:

// Cascade function
(function ($) {
$.fn.cascade = function (options) {
    var defaults = {};
    var opts = $.extend(defaults, options);

    return this.each(function () {
        $(this).change(function () {
            var selectedValue = $(this).val();
            var params = {};
            params[opts.paramName] = selectedValue;
            $.post(opts.url, params, function (items) {
                //$.getJSON(opts.url, params, function (items) {
                opts.childSelect.empty();
                if (opts.firstOption != "")
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', '-1')
                            .text(opts.firstOption));
                $.each(items, function (index, item) {
                    // alert(opts.firstOption);
                    opts.childSelect.append(
                        $('<option/>')
                            .attr('value', item.Id)
                            .text(item.Name)
                    );
                });
            });
        });
    });
};
})(jQuery);

不幸的是，它只有在对“Makes Dropdownlist”进行第二次更改后才有效，有什么想法吗？

谢谢。

Answer 1

不要使用更改处理程序来启动插件。插件代码将更改处理程序绑定(bind)到元素。

由于您在更改处理程序中调用插件，因此直到下一次选择更改时，插件的更改处理程序才会触发，因为初始更改事件已经发生。

将代码更改为:

$(document).ready(function () {   
        $('#Make_Id').cascade({
            source: "/Ad/ListModelByMake",
            cascaded: "Model_Id"
        });   
});