How to stop jQuery functions from executing multiple times in this case?
<p>I am using jQuery with .load function to update count, however if the button is clicked so fast, it can be hacked. Also I can't use unbind as this makes the button unusable after the first click.</p>

<p>Here is the jQuery I use when button is clicked.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function() {

    // update "likes" of a post
    $(".bubble-like a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-like').fadeOut(200);
        $("#result-likes").load('&lt;?php bloginfo('template_directory'); ?&gt;/ajax/add_post_like.php?post_id=' + number);
    });

    // remove my like from a post
    $(".bubble-unlike a").click(function() {
        var post_id = $(this).parent().parent().parent().attr('id');
        var number = post_id.replace(/[^0-9]/g, '');
        $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
        $(this).parent().parent().children('.bubble-liked').fadeOut(200);
        $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
        $("#result-likes").load('&lt;?php bloginfo('template_directory'); ?&gt;/ajax/remove_post_like.php?post_id=' + number);
    });

});
&lt;/script&gt;
</code></pre>

<p>If I clicked on like too fast or vice versa, the load is executed more than once. I also explained that unbind does not help.</p>

<p>Any idea?</p>

<p><strong>UPDATE</strong></p>

<p>I am not sure if I am doing that correct, but it seems to resolve it in my case.. can anyone correct/make me wrong ?</p>

<p>I added this line to my click handlers</p>

<pre><code>// update "likes" of a post
$(".bubble-like a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-like').fadeOut(200);
    $("#result-likes").load('&lt;?php bloginfo('template_directory'); ?&gt;/ajax/add_post_like.php?post_id=' + number);
});

// remove my like from a post
$(".bubble-unlike a").click(function() {
    $(this).css({'display' : 'none'});
    var post_id = $(this).parent().parent().parent().attr('id');
    var number = post_id.replace(/[^0-9]/g, '');
    $(this).parent().parent().children('.bubble-count').children('span').fadeOut(200);
    $(this).parent().parent().children('.bubble-liked').fadeOut(200);
    $(this).parent().parent().children('.bubble-unlike').fadeOut(200);
    $("#result-likes").load('&lt;?php bloginfo('template_directory'); ?&gt;/ajax/remove_post_like.php?post_id=' + number);
});
</code></pre>

<p>I added this line to my loaded scripts add_post_like and remove_post_like:</p>

<pre><code>$('.bubble a').show();
</code></pre>

<p>Now it seems to accept only one click.. Is that reliable?</p>
