gpt4 book ai didi

jquery - 防止双击缩略图以确保内容不会通过 AJAX 加载两次

转载 作者:行者123 更新时间:2023-12-01 03:47:12 25 4
gpt4 key购买 nike

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

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

现在似乎 event.preventDefault(); 被停用或发生其他情况,因为它在第二次单击时加载完整页面(而不是 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;
});

最佳答案

我总是做的是使用 $(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;
});

关于jquery - 防止双击缩略图以确保内容不会通过 AJAX 加载两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12414147/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com