jquery - 一键禁用 jQuery 功能，防止多次执行

Question

我有以下函数，可以获取默认显示的 20 条评论之外的更多评论:

$('.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;
});

它可以工作，但唯一的问题是，用户可以非常快地单击按钮三次，并且它将向 ajax_getcomments.php 发送三个请求，每次都会得到相同的结果集。

我尝试添加

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

但它没有做任何事情。

初始结果集也是使用 jQuery 获取的，因此我使用 .live(click'.

我不确定它是否与它不起作用的原因有关。

Answer 1

live 无法与 unbind 一起使用 - 您需要 die相反。

但是有更好的解决方案。由于您可能希望能够多次更新内容，因此您可以设置一个变量来查看当前是否正在运行请求:

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;
});