Как перезагрузить jQuery масонство при удалении элементов с помощью AJAX?

Question

UPDATE:

Вот мой CSS:

#masonry-container { 
    margin: 0 auto; 
} 

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

---

Я использую Rails 4, Bootstrap и Masonry-Rails gem. У меня есть следующий код, работающий на JQuery масонства организовать мои дивы, в активах/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, масонство не обновляется , Вот мой взгляд/проекты/destroy.js:

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

Как я мог заставить Кладка перезагрузить, после того, как приведенный выше код? По какой-то причине .ajaxComplete (masonryUpdate) не запускается?

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

Так, чтобы объяснить это дальше, первый мой сайт выглядит следующим образом:

Но когда я удаляю div, масонство не перезагружается; он заканчивает тем, как это, с пустым пространством на котором ДИВ раньше:

Как я могу перезагрузить Кладка после AJAX уничтожить действия?

Answer 1

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

}); 

Answer 2

вы не должны уничтожить Кладка только реинициализировать после действия Ajax и перезагрузки элементов с помощью:

$container.masonry('reloadItems'); 

Answer 3

Редактировать

Я просматривал 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(); 
});