我试图让我的 JavaScript 在点击每个评论时弹出一条消息。
我有3个评论框,每个评论框下面有1个“弹出”按钮,当单击“弹出”时,它会提醒一条消息(“Ouyeah!”)
仅单击顶部的第一个“弹出”链接就会提醒消息“Ouyeah!”,并且该消息提醒 3 次。单击其他 2 个“弹出”链接没有任何操作。
代码:
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='javascript:;' id="reply_open">popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
JS:
<script type="text/javascript">
$("#reply_open").parent().parent().parent().parent().children(".media-body").children("p").children("span").children("#reply_open").click(function(){
alert ("Ouyeah!");
</script>
仅单击顶部的第一个“弹出”链接就会提醒消息“Ouyeah!”,并且该消息提醒 3 次。单击其他 2 个“弹出”链接没有任何操作。
如何解决这个问题?非常感谢,
最佳答案
您不能有重复的 ID。
三次(不止一次!)使用 id="reply_open"
是错误的,会使您的 HTML 无效。
JSFIDDLE 演示 -> http://jsfiddle.net/LC9gg/4/
这可能就是你想要的。将 ID 设置为类并编写以下代码。
$(".reply_open").click(function () {
alert("Ouyeah!");
});
关于javascript - 将一键单击事件处理程序应用于多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21188258/