jquery .on 容器元素附加到多个选择器

Question

我正在使用 .on() 将点击事件附加到动态显示在页面上的多个元素。我遇到的问题是，当我将 .on 添加到页面上的容器并希望将单击事件附加到容器中的多个元素时，后者会覆盖前一个。

<div id="container">
   <!-- elements here appear dynamically -->
   <div id="id1"></div>
   <div id="id1"></div>
</div>

 <script>
   $('#container').on("click", "#id1", function(){});
   $('#container').on("click", "#id2", function(){});
 </script>

在上面的示例中，只有 id2 的单击事件有效。

有办法解决这个问题吗？

谢谢你，埃文。

Answer 1

演示 http://jsfiddle.net/aRBY4/2/ 这里有一点改进 http://jsfiddle.net/aRBY4/5/

是的，您的id是错误的。 :)

您对两个元素使用相同的 id，即 id1。

希望这有帮助，

代码

改进了代码

$('#container').on("click", "#id1, #id2", function() {
    alert($(this).prop('id')) // you can use --> attr('id')
});​

或

 $('#container').on("click", "#id1, #id2", function() {
        alert($(this).attr('id')) 
    });​

或

 $('#container').on("click", "#id1", function(){alert('d1')});
   $('#container').on("click", "#id2", function(){alert('d2')});​