каскадирование выпадающего меню с частичным видом mvc4

Question

У меня есть частичный вид с несколькими текстовыми полями вместе с 3 ddl для города/штата/страны. У меня есть одна модель представления для загрузки данных из страны/штата/города. Я загружаю этот частичный вид на основе значения из одного из моих событий смены раскрывающегося списка на моем основном представлении. Моя проблема заключается в том, что событие изменения выпадающего списка на частичном представлении, отображаемом на моем основном представлении, не срабатывает.

PartialView:

@model CarrierClaims.Web.ViewModels.CarrierLocationViewModel 
@Html.DropDownListFor(model=>model.CarrierLocation.CountryId,Model.CountryList,"-Select Country-") 

• мои JS на моем главном экране

  $("#CarrierLocation_CountryId").change(function() { 
  
       var url = '@Url.Content("~/")' + "Claims/GetStateList"; 
       var ddlsource = "#CarrierLocation_CountryId"; 
       var ddltarget = "#CarrierLocation_StateId"; 
       $.getJSON(url, { id: $(ddlsource).val() }, function (data) { 
        $(ddltarget).empty(); 
        $.each(data, function (index, optionData) { 
         $(ddltarget).append("<option value='" + optionData.Value + "'>" + optionData.Text + "</option>"); 
        }); 
  
       }); 
      }); 
  

Любые предложения?

Answer 1

Я думаю, что проблема JQuery не вызывает событие, потому что вы создаете второй выпадающий список динамически, попробуйте изменить это:

$("#CarrierLocation_CountryId").change(function() { 

Для этого:

$(document.body).on('change', '#CarrierLocation_CountryId', function() {