Question

I have a simple div that i use to trigger an ajax post. I call the object by one of it’s classes when it is clicked. When i submit and render the same object again i dont want it to be clickable so i remove the class from the object but it still is clicking even though in the dom it is gone. Any ideas how to prevent the object from being clicked again?

The Ajax post works fine just trying to figure out how to stop another click after the submit is complete.

Code:

HTML:

<div class="likeContent">
    <div class="bylineBox right likeThisLink" id="like-this-<?php echo get_comment_ID(); ?>">
         <a href="#" onclick="return false;" class="likeThisContent">
             <span>
                 <img src="<?php bloginfo('template_url'); ?>/images/like-icon.png" alt="Like" />
                 <?php if ($current_like_count[0] > 0) { echo $current_like_count[0];} else {echo 'Like';} ?>
             </span>
         </a>
    </div>
</div>

JS (Jquery function):

$('.likeThisLink').click(function(e) {
    var contentID = $(this).attr("id").split("-")[2];
    var siteURL = $('.siteURL').attr("id");
    var templateURL = $('.templateURL').attr("id");
    var processURL = siteURL + "/wp-admin/admin-ajax.php"
     $.post(processURL,{
      action: 'my_unique_action',
      content_id: contentID },  
      function(data) {  
        var currentLikeCount = $('.likeCount-' + contentID).attr("id").split("-")[1];
        var newLikeCount = parseInt(currentLikeCount) + 1;
        $('#like-this-'+contentID).fadeOut().html("<a><span><img src=\"" + templateURL + "/images/like-icon.png\" alt=\"Like\" />" + newLikeCount + "</span></a>").fadeIn();
        $('.likeCount-' + contentID).attr("id", "likeCountCurrent-" + newLikeCount);
        e.preventDefault();
      });  
     $(this).removeClass('likeThisLink')
});

Answer 1

You can use the jQuery one function for this like:

 $(".likeThisLink").one("click", function() {
 ....
});

The code will only execute once no matter how many times it is clicked. You can read up on it here http://api.jquery.com/one/

EDIT Alternatively you can unbind the click function like this:

$('.likeThisLink').unbind('click');