将一键事件处理程序应用于多个元素答案

【问题标题】：Apply one click event handler to multiple elements将一键事件处理程序应用于多个元素
【发布时间】：2014-01-17 14:29:39
【问题描述】：

我正在尝试让我的 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 个“弹出”链接没有任何动作。

如何解决这个问题？非常感谢，

【问题讨论】：

首先，元素ids 在页面中必须是唯一的。改变它，看看它会把你带到哪里。
天哪，请不要在定位元素时使用.parent()x5。使用.closest -- 否则下次你更改 DOM 时，此函数可能会中断。（根据您的应用程序的大小，定位/修复也将是一个巨大的痛苦）
谢谢 Jason P。你建议我改用类吗？
你的 HTML 看起来也坏了 - 'div class="media"' 的接近 div 在哪里？

标签： javascript jquery html parent children

【解决方案1】：

您不能有重复的 ID。

三次（不止一次！）使用id="reply_open" 是错误的，会使您的 HTML 无效。

JSFIDDLE 演示 -> http://jsfiddle.net/LC9gg/4/

这可能是你想要的。将 ID 设为类并编写以下代码。

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

【讨论】：

恩，我明白了。你会建议我如何改变它以达到我想要的效果？
使用类或唯一 ID。另外，不要使用parent().parent()，使用.closest。
虽然建议是正确的，但这并不能回答问题。
所以现在我正在使用这个：对吗？
@user3192948 - 我更新了我的答案，这可能是你想要的。

【解决方案2】：

首先，您的 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 已从 href 中删除。

然后，不要像使用链式 .parent() 调用那样搜索 DOM，试试这个 js：

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

这会为每个 a 添加一个事件处理程序，以提醒所需的文本。

Working example

【讨论】：

啊太棒了！非常感谢。所以我看到“a”直接跟随.media-body。但我在媒体和他们之间也有
级别。为什么不使用以下内容？谢谢！
好吧，你也可以这样写： $('html > body div.media > div.media-body > p[align=right] > span(not:[doorbell=five]) > a [href=./]')，但您很可能不会从如此具体中获得任何好处。
'.media .media-body a' 表示：给我找一个a，它位于类media-body 的元素中，也就是类media 的元素中。这些元素之间是否有更多嵌套并不重要。我们可以省略.media 或.media-body。另外，如果它适合你，请考虑接受这个作为你的答案。