jquery - 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')});​

Answer 2

演示https://jsfiddle.net/amol9supe/w18ktftb/3/

<div id="container">
   //Elements here appear dynamically
   <div id="id1" class="common-id">hulk</div>
   <div id="id2" class="common-id">rambo</div>
</div>

 <!-- Script Here -->
 $('#container').on("click", ".common-id", function() {
    alert(this.id)
 });