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

Question

I'm trying to get my javascript to pop up a message under for each comment when its clicked.

I have 3 comment boxes, each has 1 "popup" button under it, and when the "popup" is clicked, it would alert a message ("Ouyeah!")

Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.

Code:

<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>

Only clicking the first "popup" link on the top alerts the message "Ouyeah!", and the message is alerted 3 times. Clicking on other 2 "popup" links has no action.

How to fix this? Many thanks,

Answer 1

You cannot have duplicate IDs.

Using id="reply_open" thrice (more than once!) is wrong and makes your HTML invalid.

JSFIDDLE DEMO -> http://jsfiddle.net/LC9gg/4/

This may be what you want. Make the IDs as classes & write the below code.

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

Answer 2

First of all, your HTML is incorrect in a few ways:

• Your id's must be unique
• You didn't close your .media div tags.
• You're using JavaScript for a empty href

Try this instead:

<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>

I removed the id 's altogether, they're not necessary. The .media divs are properly closed, and the JavaScript was removed from the hrefs.

Then, instead of searching through the DOM like you're doing with chained .parent() calls, try this js:

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

This adds a event handler to each a , that should alert the desired text.

Working example