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

Posted 2023-02-25

【中文标题】jquery .on 容器元素附加到多个选择器

【英文标题】：jquery .on container element attached to multiple selectors

【发布时间】：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 中您提到这是一个错字，您应该编辑您的问题

【参考方案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 - 有趣的读物 - ***.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)
 );