JQuery на событии изменения doen't работы

Question

Я использую Bootstrap ComboBox plugin

и я рендеринг выпадающего внутри зрения mvc4 бритвы

@Html.DropDownListFor(model => model.CarFormatId, Model.CarFormats, "Select", new { @id = "SelectCarFormat", @class = "combobox form-control" }) 

и я пытаюсь с помощью JQuery для извлечения выберите изменения

$("#SelectCarFormat").on('change', function() { 
    alert('this is changed!');   
}); 

Но у меня тишина, ничего внутри пользовательского интерфейса, ничего не сообщалось как ошибка внутри консоли firebug?

Что я здесь делаю неправильно?

p.s. только отметить, что код JQuery заворачивают в on dom ready

Edit: Rendered HTML код

<select id="SelectCarFormat" class="combobox form-control" 
     data-val-required="The SelectCarFormatId field is required." 
     data-val-number="The field SelectCarFormatId must be a number." data-val="true" display: none;> 
    <option value="">Select</option> 
    <option value="2">Format A</option> 
    <option value="3">Format B</option> 
</select> 

Answer 1

Затем вы должны использовать делегирование событий:

$(document.body).on('change', '#SelectCarFormat', function() { 
    alert('this is changed!');   
}); 

кажется это было изменен с помощью плагина, который вы используете, поэтому элемент, который вы ищете, не имеет зарегистрированного события.

---

Из-за этого плагина он получает изменилось в этом:

<div class="combobox-container"> 
    <input type="hidden" name="normal" value=""> 
    <div class="input-group"> 
    <input type="text" autocomplete="off" placeholder="Select a State" class="combobox input-large form-control"> 
    <ul class="typeahead typeahead-long dropdown-menu" style="top: 34px; left: 0px; display: block;"> 
     <li data-value="Alabama" class=""><a href="#"><strong></strong>A<strong></strong>l<strong></strong>a<strong></strong>b<strong></strong>a<strong></strong>m<strong></strong>a<strong></strong></a> 
     </li> 
    </ul> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret"></span> <span class="glyphicon glyphicon-remove"></span> </span> 
    </div> 
</div> 
<select class="combobox input-large form-control" style="display: none;"> 
    <option value="" selected="selected">Select a State</option> 
    <!-- other options --> 
</select> 

The above one is taken from here.
Как вы можете видеть, что элемент, который вы ориентируетесь не там, на самом деле это было скрыто. Поэтому вам необходимо изменить привязку события к этому элементу:

$(document.body).on('click', '.combobox-container li', function() { 
    alert('this is changed!');   
});