CODEWITHSUNDEEP
jquery
Anagio
Anagio

Reputation: 3075

jQuery .click doesn't fire when clicking the span tag nested in the a tag

I'm using this jQuery to bind a click event to an <a> tag

jQuery(document).ready(function() {

    jQuery(".post-like a").click(function(){

        heart = jQuery(this);

        // Retrieve post ID from data attribute
        post_id = heart.data("post_id");

        // Ajax call
        jQuery.ajax({
            type: "post",
            url: ajax_var.url,
            data: "action=post-like&nonce="+ajax_var.nonce+"&post_like=&post_id="+post_id,
            success: function(count){
                // If vote successful
                if(count != "already")
                {
                    heart.addClass("voted");
                    heart.siblings(".count").text(count);
                }
            }
        });

        return false;
    })
})

The rendered HTML looks like this

<p class="button button_purple ico-like post-like"><a href="#" data-post_id="208" class="likelink"><span class="icon">
<span title="I like this article" class="qtip like"></span></span></a><span class="count">Vote</span></p>

The <span class="count">Vote</span> is overlapping the a tag and I need to keep the HTML like this. How can I have the jQuery above fire when either the a tag or the span is clicked?

This is the php generating the HTML

$output = '<p class="button button_purple ico-like post-like">';
if(hasAlreadyVoted($post_id))
$output .= '<span class="icon"><span title="'.__('I like this article', $themename).'" class="like alreadyvoted"></span></span><span class="count">'.$vote_count.'</span>';
else
$output .= '<a href="#" data-post_id="'.$post_id.'" class="likelink"><span  class="icon">
<span  title="'.__('I like this article', $themename).'" class="qtip like"></span></span></a><span class="count">'."Vote".'</span></p>';
return $output;

Thanks

Upvotes: 0

Views: 1856

Answers (4)

Andy
Andy

Reputation: 30135

you could trigger the a-click manually if the span is clicked:

jQuery(".post-like .count").click(function(){
    jQuery(this).prev('a').trigger('click');
});

Upvotes: 0

wanovak
wanovak

Reputation: 6127

$('.post-like a, .count').click(function(ev){
    var heart;
    if($(ev).is('a')){
        heart = $(this);
    } else {
        heart = $(this).siblings('a');
    }
});

http://jsfiddle.net/3LF2y/

Upvotes: 1

wirey00
wirey00

Reputation: 33661

Since you have a .count class for the span you can use it to bind the click event. 

$(".post-like a,.count").click(function(){

Upvotes: 0

srini.venigalla
srini.venigalla

Reputation: 5145

two ways:

put the span.count inside the <a> element

or

assign the click to the <p> element

Upvotes: 0

Related Questions