jQuery 中的 .change() 与 .on( "change", handler )

Question

当我使用 jQuery 处理下拉菜单上的更改触发器时遇到问题。

我用了两段代码：

//---------- 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 & Cheery：好像是这样的：

<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

我推荐使用case 1，因为它是用来加载change事件的组合文档，如果你选择元素是动态生成的，use case 1会生效。

jquery doc 也说过，.change() 是 .on ("change", handler) 的快捷方式，所以我认为最终会使用 .on 回调。

Answer 2

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

• 案例 2，是别名：.change(...) === .on("change", handler) - 如果 selector 被省略或为空，则引用事件处理程序 作为直接或直接绑定（每次在选定元素上发生事件时调用处理程序）。在这种情况下，如果你想成功地绑定一些东西到一个元素上，你需要确保它已经被加载了。

• 案例 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 准备好之前不会触发。