如何通过Ajax删除项目时刷新Masonry?这是我用来删除项目的代码:
if($deletes = $('a[rel=delete]')) {
$deletes.click(function() {
if(!window.confirm('Are you sure you wish to delete this picture?'))
return false;
$t = $(this);
$.post(
$t.attr('href'),
{},
function(data) {
if(data == "success")
$t.parents('.deleteable:first').fadeOut();
}
);
return false;
});
}
我想要刷新的原因是在删除项目后消除结果空格。
答案 0 :(得分:5)
向fadeOut()
添加一个回调,以便在已删除的元素消失后实际调用.remove()
,然后再次在容器上调用.masonry()
。
答案 1 :(得分:1)
我会说在选择器上再次调用它。它似乎有a check,看它是否被再次调用。
...snip...
// checks if masonry has been called before on this object
props.masoned = !!$wall.data('masonry');
...snip...
我也会推荐没关系,默认情况下这样做(D'哦!)< / p>
saveOptions
设置,因为它似乎支持重新调用。
答案 2 :(得分:1)
在淡出回调中再次调用砌体。让自己变得简单,并在函数中进行砌体初始化。在那里定义您的选项,这样您就不必将选项带入回调范围。
喜欢这样
$(function(){
var $bricks = $('your > elements');
function BuildWall(){
$bricks.masonry({your:'options'});
}
BuildWall();
//Your code modified
if($deletes = $('a[rel=delete]')) {
$deletes.click(function() {
if(!window.confirm('Are you sure you wish to delete this picture?'))
return false;
var $t = $(this);
$.post(
$t.attr('href'),
{},
function(data) {
if(data == "success")
$t.parents('.deleteable:first').fadeOut(function(){
//This is faster than $(this).remove();
$(this).empty().remove();
//Reset Masonry
BuildWall();
});
}
);
return false;
});
}
});
答案 3 :(得分:1)
jquery masonry本身有一个删除方法(http://masonry.desandro.com/methods.html#remove)
你可以把它放在你的fadeOut回调中:
$("your-container").masonry( 'remove', $(this) ).masonry();