我正在使用 .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 的单击事件有效。
有办法解决这个问题吗?
谢谢你, 埃文。
最佳答案
演示 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')});
关于jquery .on 容器元素附加到多个选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11240605/