Question

我有几个下拉框，其中包含ids 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){遍历id以country开头的元素，但仅运行选择器时存在的元素。它不适用于您致电.each()后创建的元素，因此使用.live()对您没有多大帮助。

对该选择器使用新样式事件委托语法，它应该起作用：

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

将document替换为未动态生成的最近父项。

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

Answer 2

而不是增量ID我会使用一个类。然后，不推荐使用live方法，但您可以在最近的静态父级上使用on，也可以在document上使用$('#closestStaticParent').on('change', '.country', function() { // this applies to all current and future .country elements });。

.country

这种方式不需要每个循环; plus事件附加到所有 jQuery集合中的元素，在本例中是所有{{1}}元素。

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

2 个答案: