Question

我正在使用Bootstrap ComboBox plugin

我在mvc4 razor视图中渲染组合框

@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

中

修改呈现的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!');           
});

关于变革事件的jquery doen＆work

1 个答案: