2

我有一个 jquery 函数，当我点击帖子缩略图时，它会加载帖子内容，效果很好。但是如果我点击两次，内容就会被加载两次。

我在某处读到需要取消绑定单击并在内容完成加载后将其绑定回来。这是我的尝试。

现在似乎event.preventDefault();get deactivate 或某些东西，因为它在第二次点击时加载了完整的页面（而不是 AJAX 内容）。

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

2 回答 2

3

我总是做的是使用$(this).data. 该函数首先检查是否设置了此标志，如果是则返回，否则设置标志并在成功时将其清除。以下应该做你想要的：

$("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;
});
于 2012-09-13T20:23:33.927 回答
0

您实际上可以尝试使用 beforeSend 和 complete 事件来绑定和取消绑定事件。这样可以确保按钮在发送 Ajax 后立即没有事件。

var clickEvent = 
    $("a.ajaxed").on("click",function(event) {
    var self = this,

    $("#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);
            },
            error:function(data){
                console.log(data);
            },
            beforeSend: function() {
            $(self).unbind("click"); // code line added 1of2
            }, 
            complete: function() {
                clickEvent();
            }
        });
    });
    return false;
});
于 2012-09-13T20:22:08.533 回答