Question

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 1

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