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

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&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

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

另外jquery doc说,.change()是.on("更改",处理程序)的快捷方式,所以我认为最终会使用.on回调.

Answer 2

在第一种情况下，您将文档级别的更改事件绑定到属于文档的元素。在这个阶段，它是否存在并不重要（比如说它是稍后创建的或稍后加载的）。

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

尝试将情况 2 包装在 $(document).ready() 函数中，如下所示：

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

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