我正在尝试让我的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个“弹出”链接无效。
如何解决这个问题？非常感谢，
首先，您的HTML在以下几种方面是错误的：
id's必须是唯一的.mediadiv标签。尝试以下方法：
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<p align="right">
<span><a href='./'>popup</a></span>
<div class="reply_form_div" STYLE="display:none;"></div>
</p>
</div>
</div>
我id完全删除了，它们不是必需的。该.mediadiv的正确关闭，以及JavaScript从HREF中删除。
然后，不要像使用链式.parent()调用那样搜索DOM，而是尝试以下js：
<script>
$('.media .media-body a').click(function(){
alert("Ouyeah!");
});
</script>
这会向每个中添加一个事件处理程序a，该事件处理程序应提醒所需的文本。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句