Question

I have the following function which fetches more comments beyond the 20 that are shown by default:

$('.more_comments_link').live('click', function() {
    $(".more_comments_link").text("Fetching More Comments...");

    var ajaxOpts = {
        type: "get",
        url: "ajax_getcomments.php",
        dataType: 'json',
        data: "&itemid=<? echo $id; ?>&type=1&owner=<? echo $event["data"]["e_creator"]; ?>&more=1",
        success: function(data) {
            $('.discussion-more').after(data);
            $(".discussion-more").hide();
        }
    };

    $.ajax(ajaxOpts);
    return false;
});

It works, but the only problem is, the user can click the button three times really quickly, and it will send three requests to ajax_getcomments.php, getting the same result set every time.

I tried adding

$(".more_comments_link").unbind('click');

but it doesn’t do anything.

The initial result set is also fetched with jQuery, hence I’m using .live(click'.

I am not sure if it has anything to do with why it’s not working.

Answer 1

live doesn’t work with unbind — you need die instead.

However there is a better solution. Since you probably want to be able to update the content more than once, you can set a variable to see whether a request is currently running:

var requestRunning = false;
$('.more_comments_link').live('click', function () {
    if (requestRunning) { // don't do anything if an AJAX request is pending
        return;
    }

    $(".more_comments_link").text("Fetching More Comments ...");

    var ajaxOpts = {
        type: "get",
        url: "ajax_getcomments.php",
        dataType: 'json',
        data: "&itemid=<? echo $id; ?>&type=1&owner=<? echo $event["
        data "]["
        e_creator "]; ?>&more=1",
        success: function (data) {
            $('.discussion-more').after(data);
            $(".discussion-more").hide();
        },
        complete: function() {
            requestRunning = false;
        }

    };

    requestRunning = true;
    $.ajax(ajaxOpts);
    return false;
});