使用jQuery动态添加onchange函数以下拉

Question

我有几个下拉框，ID 为 country1, country2, ... 当国家/地区在下拉列表中更改时，该国家/地区的值应显示在警报框中。

如果我像这样为一个盒子添加 onchange 处理程序，它可以正常工作：

 $('#country1') .live('change', function(e){
        var selectedCountry = e.target.options[e.target.selectedIndex].value;
        alert(selectedCountry);
 });

但我需要为所有下拉框动态执行此操作，所以我尝试了：

$(document).ready(function() {
  $('[id^=country]') .each(function(key,element){
    $(this).live('change', function(e){
      var selectedCountry = e.target.options[e.target.selectedIndex].value;
      alert(selectedCountry);
     });
  });               
});

这不起作用。更改所选国家/地区时没有语法错误，但没有任何反应。我确信每个循环都执行了几次，并且数组包含选择框。

对此有什么想法吗？

谢谢， 保罗

Answer 1

.live() 存在的原因是考虑到调用选择器时不存在的元素。

$('[id^=country]') .each(function(key,element){ 迭代具有以country 开头的id 的元素，但仅在您运行选择器时存在的元素。它不适用于您调用 .each() 后创建的元素，因此使用 .live() 对您没有多大好处。

将新样式的事件委托语法与该选择器一起使用，它应该可以工作：

$(document).on('change', '[id^=country]', function(e) {
    // ...
});

将document 替换为最接近的不是动态生成的父级。

另外，考虑为这些元素添加一个类以及 id 属性。

Answer 2

我会使用类而不是增量 ID。然后 live 方法被弃用，但您可以在最近的静态父级或 document 上使用 on 委托。

$('#closestStaticParent').on('change', '.country', function() {
  // this applies to all current and future .country elements
});

这种方式不需要每个循环； plus 事件被附加到 所有 jQuery 集合中的元素，在本例中为所有 .country 元素。