Question

I have a jquery function that loads post content when I click on the post thumbnail and it works great. But if I click twice, the content gets loaded twice.

I read somewhere that I needed to unbind the click and bind it back when content has finished loading. Here is my attempt.

Now it seems that the event.preventDefault(); get deactivated or something because it loads the complete page on the second click (instead of the AJAX content).

$("a.ajaxed").on("click",function(event) {
    event.preventDefault();
    var self = this,
   // ...; other variables
    $(self).unbind("click"); // code line added 1of2
    $("#streamwrapper").fadeOut(1000, function(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: ajax_object.ajaxurl,
            data: ({
                action : "get_all_images",
                post_id: postid
                }),
            success:function(data){
                $("#board").append(postdiv);
                $("#post-container").append(data);
                postdiv.fadeIn(1000);
                $(self).bind("click"); // code line added 2of2
            },
            error:function(data){
                console.log(data);
            }
        });
    });
    return false;
});

Answer 1

What I always do is attach an ‘executing’ flag to the element using $(this).data. The function first checks to see if this flag is set, if it is it returns out, otherwise it sets the flag and clears it on success. The following should do what you want:

$("a.ajaxed").on("click",function(event) {
   // ...; other variables

   var self = this; // needed for $(self).removeData below

   if ($(self).data('executing')) // if we're executing, return
       return;

    $(self).data('executing', true); // set executing flag

    $("#streamwrapper").fadeOut(1000, function(){
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: ajax_object.ajaxurl,
            data: ({
                action : "get_all_images",
                post_id: postid
                }),
            success:function(data){
                $("#board").append(postdiv);
                $("#post-container").append(data);
                postdiv.fadeIn(1000);

                $(self).removeData('executing'); // clear the executing flag
            },
            error:function(data){
                console.log(data);
            }
        });
    });
    return false;
});