将onchange绑定到下拉菜单

Question

我对在元素上绑定onchange有点困惑。我知道有多种方法可以实现。 HTML <select id="ddl" onchange="test()"></select> jQuery $(function(){ $("#ddl").change(function(){ return test(); }); }); 或者 $(function(){ $("#ddl").bind("change", function(){ return test(); }); }); 在这三种方法中， 哪一种被认为是标准实践？ 这些方法中有没有任何优点？

- user1618825

---

以下是关于 jQuery 中 bind 和 live 方法的区别的讨论：https://dev59.com/tnNA5IYBdhLWcg3wgeAc 希望对您有所帮助。 - sasi

Answer 1

您也可以使用.on。

$('SELECT').on('change',function(){
   // code
});

在 jQuery 1.7 之前，change() 只是 bind("change") 的快捷方式。

然而，在 1.7 版本之后，on() 替代了 bind("change")，所以 change() 现在是其快捷方式。

因此，最好的方法是：

$("SELECT").bind("change", function(e) {});
$("SELECT").on("change", function(e) {});

我更喜欢第二个选项，因为它也可以自动应用于动态生成的DOM。

- Dipesh Parmar

Answer 2

所有提到的jquery方法似乎都是相等的，我建议使用.change()使您的代码更易于阅读。

我曾经遇到过html onchange =“”被jquery绑定事件重写的情况，但多次调用jquery .change()将链式处理程序，这通常是想要的行为。

为了使代码更清晰，我仅在简单的程序中使用html onchange属性，我知道这些程序不会有多个事件处理程序，并且内部代码非常简单（通常只有一个函数）。

- amik

Answer 3

不要每次重新绑定 <select>，最好只是交换其内容（<option> 元素的列表）。

所以像你已经在使用的那样：

$("#ItemsPerPage").change(function(e) { return updatePaging(); });

但是当你更新它时，只需交换其内容（其中newSelectElement是新的<select>元素）：

function updateItemsPerPage( newSelectElement ) {
    $("#ItemsPerPage").empty().append( newSelectElement.childNodes );
}

- Kapil Gupta