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.