javascript jQuery 中的 .change() 与 .on("change", handler)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26599923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.change() vs .on( "change", handler ) in jQuery
提问by haitran
I have an issue when I use jQuery to handle the trigger of change on my drop-down.
当我使用 jQuery 处理下拉列表中的更改触发器时遇到问题。
I use 2 pieces of code:
我使用两段代码：
//---------- Case 1
$(document).on("change", "#drop-down-id", function () {
alert(this.value);
});
//----------Case 2
$("#drop-down-id").change(function () {
alert(this.value);
});
The first one running smoothly, but the second one is not triggered when I start the browser, but after I refresh my site, it works.
第一个运行顺利，但第二个在我启动浏览器时没有触发，但刷新我的网站后，它可以工作。
Do you have any idea?
你有什么主意吗？
My jQuery version: 1.11.1, and I've tested on Chrome 38, Firefox 32 and IE 11.
我的 jQuery 版本：1.11.1，我已经在 Chrome 38、Firefox 32 和 IE 11 上进行了测试。
-- Edit: @JanR & Cheery: It seems like this:
-- 编辑：@JanR & Cheery：看起来像这样：
<select id="drop-down-id">
<% arr.each do |option| %>
<option value="<%= option %>"><%= option %></option>
<% end %>
</select>
I've used Rails 4.1 and arris an array contains numbers.
我使用过 Rails 4.1，而arr是一个包含数字的数组。
-- Edit: I found out that the issue came from the Asset Pipeline of Rails, not the jQuery.
-- 编辑：我发现问题来自 Rails 的资产管道，而不是 jQuery。
I put the JS code inside a script tag and it works in both case, but when I put it in the assets folder, the issue happens.
我把 JS 代码放在一个脚本标签中，它在两种情况下都可以工作，但是当我把它放在资产文件夹中时，问题就发生了。
Thank you for your quick replies!
感谢您的快速回复！
回答by Lion
I recommend using case 1, since it is composed document to load change event, if you choose the elements are dynamicallygenerated, use case 1 will be effective.
我推荐使用case 1，因为它是组合文档来加载change事件，如果你选择元素是动态生成的，use case 1会有效。
Also jquery doc said, .change () is a shortcut for .on ("change", handler), so I think eventually will use .on callback.
jquery doc还说，.change()是.on("change", handler)的快捷方式，所以我认为最终会使用.on回调。
回答by ajax333221
When using .on(), keep in mind that:
使用.on() 时，请记住：
Case 2, is an alias:
.change(...) === .on("change", handler)- If theselectoris omitted or is null, the event handler is referred to as direct or directly-bound (The handler is called every time an event occurs on the selected elements). In this case, if you want to bind something successfully to an element, you need to ensure it is already loaded.Case 1:
.on("change", selector, handler)- If theselectoris provided, the event handler is referred to as delegated (The handler is not called when the event occurs directly on the bound element, but only for descendants that match the selector). In this case, you don't need the element to be loaded or not at the time of your binding.
情况 2，是别名：
.change(...) === .on("change", handler)- 如果selector省略或为空，则事件处理程序被称为直接或直接绑定（每次在所选元素上发生事件时都会调用该处理程序）。在这种情况下，如果要将某些内容成功绑定到元素，则需要确保它已经加载。情况 1：
.on("change", selector, handler)- 如果selector提供了，则事件处理程序被称为委托的（当事件直接发生在绑定元素上时，处理程序不会被调用，而仅针对与选择器匹配的后代）。在这种情况下，您不需要在绑定时加载或不加载元素。
The benefits of doing it one way instead of the other are well explained in this answerfrom Difference between .on('click') vs .click().
在这个来自.on('click') vs .click() 之间的差异的答案中很好地解释了以一种方式而不是另一种方式进行操作的好处。
回答by JanR
In case one you are binding the change event on the document level to an element that's part of the document. At this stage it doesn't matter whether it exists or not yet (say it's created later or loaded later).
如果您将文档级别的更改事件绑定到作为文档一部分的元素。在这个阶段，它是否存在并不重要（比如它是稍后创建的或稍后加载的）。
In the second case you are binding the event to an element that has to exist in the DOM already or the binding will fail. What can be happening is that your javascript is firing before the element has been loaded on the page.
在第二种情况下，您将事件绑定到 DOM 中必须已经存在的元素，否则绑定将失败。可能发生的情况是您的 javascript 在元素加载到页面之前触发。
Try wrapping case 2 in a $(document).ready() function like so:
尝试将 case 2 包装在 $(document).ready() 函数中，如下所示：
$(document).ready(function(){
//----------Case 2
$("#drop-down-id").change(function () {
alert(this.value);
});
});
This will ensure your javascript won't fire until the DOM is ready.
这将确保您的 javascript 在 DOM 准备就绪之前不会触发。
