JQuery Cascade函數在改變事件後沒有立即發射

Question

在Ajax.BeginForm提交後，dropdownlist級聯改變（）不會直接觸發。

認爲，產生新的DropDownList：

@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) 
} 

一個填滿完成後，生成的觀點是：

@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); 

不幸的是，它只能在使Dropdownlist第二次更改後才起作用，有什麼想法嗎？

謝謝。

Answer 1

感謝Charlietfi，我能解決這個問題，這裏是解決方案：

在Ajax.Form我們需要添加一個OnSucess呼叫定義級聯功能：

@using (Ajax.BeginForm(MVC.Ad.CreateAd(), new AjaxOptions { UpdateTargetId = "ad", InsertionMode = InsertionMode.Replace, OnSuccess = "createAdCategoryTypeOnSucess" }, new { @id = "categoryTypeForm" })) 

然後在外部JS文件中，我們可以定義級聯定義：

function createAdCategoryTypeOnSucess() 
{ 
    $("#Make_Id").cascade({ 
     url: "/Ad/ListModelByMake", 
     paramName: "makeId", 
     firstOption: '', 
     childSelect: $("#Model_Id") 
    }); 
}  

像這樣，事件在下拉改變後立即被觸發。

再次感謝charlietfl;）

Answer 2

請勿使用更改處理程序來啓動插件。插件代碼將更改處理程序綁定到元素。

由於您在更改處理程序中調用插件，插件的更改處理程序將不會觸發，直到下次選擇因爲已發生初始更改事件而發生更改時爲止。

更改代碼：

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