jquery click event on anchor

Answer 1

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 2

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;  
    });
});

Answer 3

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

Answer 4

!THIS is tested and working.

You forgot to put your code inside the document ready function

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