作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 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/
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。 例子: .parent { width: 100px; height: 100p
我是一名优秀的程序员,十分优秀!