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

【问题标题】：jquery .on container element attached to multiple selectorsjquery .on 容器元素附加到多个选择器
【发布时间】：2012-06-29 17:38:13
【问题描述】：

我正在使用.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 的点击事件有效。

有没有办法解决这个问题？

谢谢你， EV.

【问题讨论】：

奇怪的是你有id1，但它不起作用，你在dom中没有id2，但它工作
在您的 cmets 中您提到这是一个错字，您应该编辑您的问题

标签： jquery onclick addeventlistener propagation

【解决方案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')});

【讨论】：

只是一个小建议，id 不是属性。应该是$(this).attr('id')
@Jashwant :) 完成了但是读了这个 bruv - 有趣的读物 - stackoverflow.com/questions/5874652/prop-vs-attr :))
哈哈...我现在情绪低落（我很笨）。从来不知道。 jQuery 文档没有提到这一点。我在想他们引入prop 只是为了语义。非常感谢您的链接。
@Jashwant :) 别担心，兄弟，祝你好运！哦，你的checkbox 问题进展如何？ :))
@Jashwant lol okies 或者我们应该聊天的一天可能在周末左右，我会看看我是否有时间，在我结束时有点晚了，所以很快就会退出。 :) 但会再次查看您的问题并更详细地解释它。 ;)

【解决方案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)
 });

【讨论】：