Home/ Questions/Q 7947869
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T01:33:20+00:00

I am using jQuery with .load function to update count, however if the button

  • 0

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.

Here is the jQuery I use when button is clicked.

<script type="text/javascript">
$(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('<?php bloginfo('template_directory'); ?>/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('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
    });

});
</script>

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.

Any idea?

UPDATE

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 ?

I added this line to my click handlers

// 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('<?php bloginfo('template_directory'); ?>/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('<?php bloginfo('template_directory'); ?>/ajax/remove_post_like.php?post_id=' + number);
});

I added this line to my loaded scripts add_post_like and remove_post_like:

$('.bubble a').show();

Now it seems to accept only one click.. Is that reliable?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can disable the click event whenever the button is clicked til the end of loading process. Then activate the event after it’s completed within the callback function.

    gory details: http://api.jquery.com/load/

    UPDATE:

    I’ve made a quick example for you: http://jsfiddle.net/hvfc5/1/

    As you click the button, it would firstly remove the event binding on the button, then bind it back again after the image loaded. But if you click it again after this, you’d figure that the event still can be unbinded, but it never comes back. It’s because the image has been loaded, therefore the load() function won’t even be triggered.

    This is just a demo sample for you to understand how to manipulate things, you still need to customize your own version as demanded.

    • 0