单击1后禁用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;
    }); 

它的工作原理,唯一的问题是,用户可以非常快速地点击按钮3次,并且它会向ajax_getcomments.php发送3个请求,每次都获得相同的结果集.

我尝试添加

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

Answer 2

对于一个非常简单的解决方案,所有这些解决方案都非常复杂; 根据以下文档使用.one():

http://api.jquery.com/one/

只需live改为one.见下文:

$('.more_comments_link').one('click', function() {