Reputation: 3075
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
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
Reputation: 6127
$('.post-like a, .count').click(function(ev){
var heart;
if($(ev).is('a')){
heart = $(this);
} else {
heart = $(this).siblings('a');
}
});
Upvotes: 1
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
Reputation: 5145
two ways:
put the span.count
inside the <a>
element
or
assign the click to the <p>
element
Upvotes: 0