删除项目时刷新jquery.masonry

时间:2011-03-05 21:43:17

标签: jquery jquery-masonry

如何通过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;           
    });
}

我想要刷新的原因是在删除项目后消除结果空格。

4 个答案:

答案 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...

我也会推荐saveOptions设置,因为它似乎支持重新调用。没关系,默认情况下这样做(D'哦!)< / p>

答案 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();