djeetee djeetee - 3 months ago 18
jQuery Question

jquery click event on anchor

Here's the snippet of html i have:

<div id="tag-cloud-widget">
<div class="content">
<a href="#" rel="1" class="cloud-element" data-tag-id="10" style="font-size: 12px; color: rgb(205, 236, 222); ">T1</a>
<a href="#" rel="1" class="cloud-element" data-tag-id="1" style="font-size: 12px; color: rgb(205, 236, 222); ">T2</a>
<a href="#" rel="1" class="cloud-element" data-tag-id="3" style="font-size: 12px; color: rgb(205, 236, 222); ">T3</a>
</div>
</div>


I'd like to set up a click handler to respond to the user's click on the anchor tags. Here's the test code:

$("#tag-cloud-widget .content a").click(function(e) {
alert('clicked');
return false;
});


The click handler above does not get fired and neither does this:

$("#tag-cloud-widget .content .cloud-element").click(function(e) {
alert('clicked');
return false;
});


However,

$("#tag-cloud-widget .content").click(function(e) { ... });


and

$("#tag-cloud-widget").click(function(e) { ... });


do get fired!

What am I not seeing???

Answer

When handling anchor click events, always use e.preventDefault(); when you don't need the anchor anyway. Fires like a charm

Comments