jquery click event on anchor

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

Answer 2

!THIS is tested and working.

You forgot to put your code inside the document ready function

$(function() {
//your code
});

Answer 3

The reason why your first code doesn't work because there are multiple anchors in your div content tag, hence when you associate anchor that resides in that tag with a click, it will generate ambiguity to in choosing exact anchor. You can target particular anchor by using its id attribute, and than associate the id with your events to target particular anchor. So the code will be as follows.

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

And following will associate clicks to particular anchor.

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

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

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

Answer 4

Write your code inside document.ready and use e.preventDefault

Write like given below :

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