CODEWITHSUNDEEP
jqueryeventsclickhref
djeetee
djeetee

Reputation: 1837

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???

Upvotes: 16

Views: 74861

Answers (4)

Bilal Rabi
Bilal Rabi

Reputation: 149

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

Upvotes: 0

user657496
user657496

Reputation:

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

Upvotes: 16

johnlemon
johnlemon

Reputation: 21509

!THIS is tested and working.

You forgot to put your code inside the document ready function

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

Upvotes: 1

Kushal
Kushal

Reputation: 3178

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

Upvotes: 0

Related Questions