Обновить jquery.masonry при удалении элемента

Question

Как мне обновить Masonry при удалении элемента через Ajax? Это код, который я использую для удаления элемента:

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;           
    });
}

Причина, по которой я хочу обновить, состоит в том, чтобы исключить получившиеся пробелы после удаления элементов.

Answer 1

Добавьте обратный вызов к вашему fadeOut() для фактического вызова .remove() вашего удаленного элемента, как только он исчезнет, ​​затем просто вызовите .masonry() для контейнера.

Answer 2

Сама кладка jquery имеет метод удаления (http://masonry.desandro.com/methods.html#remove)

Вы можете поместить это в свой обратный вызов fadeOut:

$("your-container").masonry( 'remove', $(this) ).masonry();

Answer 3

Повторный вызов каменной кладки в режиме обратного вызова. Сделайте это проще для себя, и сделайте свою инициализацию кладки в функции. Определите здесь свои параметры, чтобы вам не приходилось переносить эти параметры в область обратного вызова.

Вот так

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

Answer 4

Я бы сказал, просто позвони снова на селектор.Кажется, у него есть проверка , чтобы увидеть, был ли он вызван снова.

...snip...
  // checks if masonry has been called before on this object
  props.masoned = !!$wall.data('masonry');
...snip...

Я также рекомендовал бы настройку saveOptions, поскольку она, кажется, поддерживает-calls. Неважно, кажется, по умолчанию (D'oh!)