jQuery 将 onchange 绑定到下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15089434/
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
Binding onchange to dropdown
提问by Dipesh Parmar
I am little confused in binding onchangeto select. I can see there are multiple ways of doing this.
我对绑定onchange到select. 我可以看到有多种方法可以做到这一点。
html
html
<select id="ddl" onchange="test()"></select>
jquery
查询
$(function(){
$("#ddl").change(function(){
return test();
});
});
or
或者
$(function(){
$("#ddl").bind("change", function(){
return test();
});
});
Among these 3 methods
这3种方法中
- Which one is considered as a standard practice?
- Is there any merits with any of these methods?
- 哪一个被认为是标准做法？
- 这些方法有什么优点吗？
回答by Dipesh Parmar
You can also use .on
你也可以使用 .on
$('SELECT').on('change',function(){
// code
});
Before jQuery 1.7, change()was simply an short cut for bind("change").
在 jQuery 1.7 之前，change()它只是bind("change").
As of 1.7 however, on()has replaced bind("change"), so change()is a shortcut for that instead.
然而，从 1.7 开始，on()已替换bind("change"),so change()是替代的快捷方式。
Therefore the best way would be either;
因此，最好的方法是要么；
$("SELECT").bind("change", function(e) {});
$("SELECT").on("change", function(e) {});
I prefer the 2nd option as it also can applied automatically to the dynamically generated DOM.
我更喜欢第二个选项，因为它也可以自动应用于动态生成的DOM.
回答by amik
all mentioned jquery methods seems to be equal, I would suggest using .change() making your code easier to read.
所有提到的 jquery 方法似乎都是平等的，我建议使用 .change() 使您的代码更易于阅读。
I've experienced that html onchange="" is rewritten by jquery bound events, but multiple calling to jquery .change() will chain the handlers which is usually wanted behavior.
我经历过 html onchange="" 被 jquery 绑定事件重写，但多次调用 jquery .change() 将链接处理程序，这通常是需要的行为。
To make the code clean, I'm using html onchange property only in simple programs which I know that will not have multiple event handlers and the code inside is really easy (usually one function).
为了使代码干净，我只在简单的程序中使用 html onchange 属性，我知道这些程序不会有多个事件处理程序，而且里面的代码非常简单（通常只有一个函数）。
回答by Kapil Gupta
Instead of rebinding the <select>every time, you're better off just swapping its contents (the list of <option>elements) instead.
与其<select>每次都重新绑定，不如交换它的内容（<option>元素列表）。
So use this as you already are:
所以像你一样使用它：
$("#ItemsPerPage").change(function(e) { return updatePaging(); });
but when you update it, just swap out its contents ( where newSelectElement is the new <select>element):
但是当你更新它时，只需换出它的内容（其中 newSelectElement 是新<select>元素）：
function updateItemsPerPage( newSelectElement ) {
$("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}
