如何在删除带有 AJAX 的项目时重新加载 jQuery Masonry？

Question

更新：

这是我的 CSS:

 #masonry-container {
   margin: 0 auto;
}

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

我正在使用 Rails 4、Bootstrap 和 Masonry-Rails gem。我有以下代码为 jQuery Masonry 工作，以在 assets/javascipts/application.js 中安排我的 divs:

$(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 曾经是的地方有一个空的 space：

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

Answer 1

您不必摧毁 Masonry，只需在 ajax 操作后重新初始化它并使用以下方法重新加载项目：

$container.masonry('reloadItems');

Answer 2

编辑

我正在查看您的 another question，我想我想出了一个更好的解决方案。您的问题实际上可能与以下行有关。

$(document).ajaxComplete(masonryUpdate);

因为 ajaxComplete 调用带有特定参数的设置处理函数 show here 你最好的选择是使用匿名函数来调用 masonryUpdate。

$(document).ajaxComplete(function(event, xhr, settings) {
  masonryUpdate();
};

这意味着您不必 $('.deleting').bind 函数来处理删除。

旧

你实际上可以在你淡出一个项目后调用砌体

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

Answer 3

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

});

如何在删除带有 AJAX 的项目时重新加载 jQuery Masonry？

How to reload jQuery Masonry, when deleting items with AJAX?

javascript

ajax

jquery

ruby-on-rails

jquery-masonry