title: How to reload jQuery Masonry, when deleting items with AJAX?
body: <p>UPDATE:</p>
  
  <p>Here is my CSS:</p>
  
  <pre><code> #masonry-container {
     margin: 0 auto;
  }
  
  .box {
     width: 50%;
     margin-top: 30px;
  }
  </code></pre>
  
  <hr>
  
  <p>I'm using Rails 4, Bootstrap and the <a href="https://i.stack.imgur.com/vLOYs.png" rel="nofollow noreferrer">Masonry-Rails gem</a>. I have the following code working for jQuery Masonry to arrange my divs, in assets/javascipts/application.js:</p>
  
  <pre><code>$(function(){
    $('#masonry-container').masonry({
      itemSelector: '.box',
      isFitWidth: true
    });
  });
  
  var masonryUpdate = function() {
      setTimeout(function() {
          $('#masonry-container').masonry();
      }, 200);
  }
  
  $(document).on('click', masonryUpdate);
  $(document).ajaxComplete(masonryUpdate);
  </code></pre>
  
  <p>It works otherwise, but when I try to delete an item with AJAX, Masonry doesn't update. Here is my view/projects/destroy.js:</p>
  
  <pre><code>$('.deleting').bind('ajax:success', function() {  
      $(this).closest('.poista').fadeOut();
  });
  </code></pre>
  
  <p>How could I force Masonry to reload, after the code example above? For some reason .ajaxComplete(masonryUpdate) is not triggered?</p>
  
  <p>It reloads if I do a page refresh, but that takes away the point of using AJAX with the destroy action...</p>
  
  <p>So to explain this further, first my site looks like this: </p>
  
  <p><img src="https://i.stack.imgur.com/vLOYs.png" alt="two columns of divs"></p>
  
  <p>But when I delete a div, Masonry doesn't reload; it ends up looking like this, with an empty space on where the div used to be:</p>
  
  <p><img src="https://i.stack.imgur.com/brp0S.png" alt="empty space where the div used to be"></p>
  
  <p>How could I reload Masonry after the AJAX destroy action?</p>