javascript - 使用 AJAX 删除项目时如何重新加载 jQuery Masonry？

Question

更新:

这是我的 CSS:

 #masonry-container {
   margin: 0 auto;
}

.box {
   width: 50%;
   margin-top: 30px;
}

<小时/>

我正在使用 Rails 4、Bootstrap 和 Masonry-Rails gem 。我有以下代码用于 jQuery Masonry 来排列我的 div，位于 asset/javascipts/application.js 中:

$(function(){
  $('#masonry-container').masonry({
    itemSelector: '.box',
    isFitWidth: true
  });
});

var masonryUpdate = function() {
    setTimeout(function() {
        $('#masonry-container').masonry();
    }, 200);
}

$(document).on('click', masonryUpdate);
$(document).ajaxComplete(masonryUpdate);

它以其他方式工作，但是当我尝试使用 AJAX 删除项目时，Masonry 不会更新。这是我的 View /projects/destroy.js:

$('.deleting').bind('ajax:success', function() {  
    $(this).closest('.poista').fadeOut();
});

在上面的代码示例之后，如何强制 Masonry 重新加载？由于某种原因 .ajaxComplete(masonryUpdate) 未触发？

如果我刷新页面，它会重新加载，但这消除了使用 AJAX 和销毁操作的意义...

为了进一步解释这一点，首先我的网站如下所示:

但是当我删除一个 div 时，Masonry 不会重新加载；它最终看起来像这样，在 div 原来所在的位置有一个空白:

如何在 AJAX 销毁操作后重新加载 Masonry？

Answer 1

$('.deleting').bind('ajax:success', function() {  
    $ele = $(this).closest('.poista');
    $ele.fadeOut(200, function(){
          $("#masonry-container").masonry( 'remove', $ele ).masonry();
    });

});