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

回答1:

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

回答2:

!THIS is tested and working.

You forgot to put your code inside the document ready function

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

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

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

来源：https://stackoverflow.com/questions/5443469/jquery-click-event-on-anchor

标签

jquery

events

click

href