将单击事件处理程序应用于多个元素

时间:2014-01-17 14:29:39

标签: javascript jquery html parent children

我正在尝试让我的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个“弹出窗口”链接无法执行操作。

如何解决这个问题?非常感谢,

2 个答案:

答案 0 :(得分:2)

您不能拥有重复的ID。

使用id="reply_open"三次(不止一次!)是错误的,并使您的HTML无效。

JSFIDDLE DEMO - &gt; http://jsfiddle.net/LC9gg/4/

这可能就是你想要的。将ID作为类和&amp;写下面的代码。

$(".reply_open").click(function () {
    alert("Ouyeah!");
});

答案 1 :(得分:0)

首先,您的HTML在某些方面不正确:

  • 您的id's必须是唯一的
  • 您没有关闭.media div标签。
  • 您正在使用JavaScript进行空的href

请改为尝试:

<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,他们没有必要。 .media div已正确关闭,JavaScript已从hrefs中删除。

然后,不要像使用链式.parent()调用一样搜索DOM,请尝试以下js:

<script>
    $('.media .media-body a').click(function(){
        alert("Ouyeah!");
    });
</script>

这会为每个a添加一个事件处理程序,它应该提醒所需的文本。

<强> Working example