Question

当我使用jQuery处理下拉列表中的更改触发器时，我遇到了问题。

我使用2段代码：

//---------- Case 1
$(document).on("change", "#drop-down-id", function () {
    alert(this.value);
});
//----------Case 2
$("#drop-down-id").change(function () {
    alert(this.value);
});

第一个运行顺利，但第二个没有在我启动浏览器时触发，但在我刷新我的网站后，它可以工作。

你有什么想法吗？

我的jQuery版本：1.11.1，我已在Chrome 38，Firefox 32和IE 11上测试过。

- 编辑： @JanR＆amp;爽快：好像这样：

<select id="drop-down-id">
    <% arr.each do |option| %>
        <option value="<%= option %>"><%= option %></option>
    <% end %>
</select>

我使用过Rails 4.1而 arr 是一个包含数字的数组。

- 编辑：我发现问题来自Rails的Asset Pipeline，而不是jQuery。

我把JS代码放在一个脚本标记中，它在两种情况下都有效，但当我把它放在assets文件夹中时，就会出现问题。

感谢您的快速回复！

Answer 1

我建议使用案例1，因为它是由加载更改事件组成的文档，如果选择动态生成的元素，则用例1将生效。

jquery doc也说，.change（）是.on的快捷方式（＆＃34;更改＆＃34;，处理程序），所以我认为最终会使用.on回调。

Answer 2

使用.on()时，请记住：

案例2是别名：.change(...) === .on("change", handler) -如果省略selector或为null，则引用事件处理程序直接或直接绑定（每次在选定元素上发生事件时都调用处理程序）。在这种情况下，如果要成功地将某些内容绑定到元素，则需要确保已将其加载。
案例1：.on("change", selector, handler) -如果提供了selector，则事件处理程序称为委托（当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代调用）。在这种情况下，绑定时不需要加载元素或不加载元素。

this answer的Difference between .on('click') vs .click()中很好地说明了以一种方式代替另一种方式进行操作的好处。

Answer 3

如果您将文档级别的更改事件绑定到文档的一部分元素。在这个阶段，它是否存在无关紧要（比如说它是后来创建的或稍后加载的）。

在第二种情况下，您将事件绑定到必须已存在于DOM中的元素，否则绑定将失败。可能发生的事情是你的javascript在元素加载到页面之前触发。

尝试将案例2包装在$（document）.ready（）函数中，如下所示：

$(document).ready(function(){
//----------Case 2
        $("#drop-down-id").change(function () {
              alert(this.value);
        });
});

这将确保您的javascript在DOM准备好之前不会触发。

jQuery中的.change（）vs .on（“change”，handler）

3 个答案: