3

我有几个下拉框，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);
     });
  });               
});

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

对此有任何想法吗？

谢谢，保罗

4

2 回答 2

6

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

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

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

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

替换document为不会动态生成的最近的父级。

此外，请考虑将类与id属性一起添加到这些元素中。

于 2013-01-03T16:38:44.890 回答
5

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

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

你不需要这样的 each 循环；plus 事件附加到jQuery 集合中的所有元素，在本例中是所有.country元素。

于 2013-01-03T16:38:11.347 回答