Событие jQuery .on 'change' не запускается для выпадающего списка внутри частичного представления

Question

Я пытаюсь замаскировать текстовое поле для телефонных номеров при изменении выпадающего списка. И текстовое поле, и раскрывающийся список находятся внутри частичного представления, которое динамически загружается. Однако событие on.change не запускается вообще. Пожалуйста помоги!

JQuery

$.ajax({ 
    url: '/Brd/CreatePointofContact' 
}).success(function (partialView) { 
    $('#newPocs').append(partialView); 
}); //this is what loads the partial view 

//doesn't work 
$(document).on("change", "#NumberTypeId", function() { 
    alert("Hi!"); 
    //do masking here 
}); 

//this doesn't work either 
$("#NumberTypeId").on('change', function (e) { 
    alert("Hi!"); 
    var mask = "(999)-999-9999"; 
    var valueSelected = this.value; 
    if (valueSelected == 1) { 
    $('#PhoneNumber').mask(mask); 
    } else { 
    $('#PhoneNumber').unmask(mask); 
    } 
}); 

Общий вид

<div id="newPocs"> 
    @for (int i = 0; i < @Model.NewPocs.Count(); i++) 
    { 
    @Html.EditorFor(model => @Model.NewPocs[i]) 
    } 
</div> 

Частичный вид (динамически загружен)

<div class="col-md-3"> 
    @Html.DropDownListFor(m => m.NumberTypeId, @Model.NumberType, "-- Select --", new { @class = "form-control" }) 
</div> 
<div class="col-md-2"> 
    @Html.TextBoxFor(m => m.PhoneNumber, new { @placeholder = "Phone Number", @class = "form-control" }) 
</div> 

Answer 1

Если вы загружаете этот Partial View асинхронно, тогда этот элемент не существует, когда ваш JavaScript обрабатывается. Вы делаете все правильно, настроив делегата, однако это не сработает, если посмотреть на объект $(document). Оберните свой частичный просмотр, загрузив его внутри <div>, который всегда будет там.

Если вы должны были поместить его внутри «newPocs» DIV, ваш JavaScript должен выглядеть следующим образом:

$('#newPocs').on("change", "#NumberTypeId", function() { 
    alert("Hi!"); 
    //do masking here 
}); 

Это должно работать для вас, независимо от того, сколько раз вы перезагрузить Partial View без перезагрузки целая страница.

Answer 2

Наконец-то это получилось, просто указав @id в раскрывающемся списке в моем частичном представлении. Мой плохой для того, чтобы не понять это рано!

**the jQuery remained the same** 
 
    
 
    $(document).on('change', '#NumberTypeId', function() { 
 
      alert("Hi!"); 
 
     });

**instead of** 
 

 
<div class="col-md-3"> 
 
    @Html.DropDownListFor(m => m.NumberTypeId, @Model.NumberType, "-- Select --", new { @class = "form-control" }) 
 
</div> 
 

 
**declared @id property as follows** 
 

 
<div class="col-md-3"> 
 
      @Html.DropDownListFor(m => m.NumberTypeId, @Model.NumberType, "-- Select --", new { @id = "NumberTypeId", @class = "form-control" }) 
 
     </div>

Answer 3

когда частичный вид загружен с JQuery AJAX успеха включают:

success: function (result) { 
     $('.classSelect').on('change', SelectChangeExample); 
} 

затем создать функцию:

function SelectChangeExample() { 
     alert('test'); 
    }