title: Get Isotope to work on AJAX loaded container
body: <p>I'm using Isotope for the layout of some blocks on a page.  My page HTML structure can be simplified as follows:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;a href="/page1.htm"&gt;Page 1&lt;/a&gt;
      &lt;a href="/page1.htm"&gt;Page 1&lt;/a&gt;
      &lt;a href="/page1.htm"&gt;Page 1&lt;/a&gt;
  &lt;/nav&gt;
  &lt;div class="main-content-container"&gt;
      &lt;div class="main-content"&gt;
          &lt;div class="blocks"&gt;
              &lt;div class="block"&gt;Block 1&lt;/div&gt;
              &lt;div class="block"&gt;Block 2&lt;/div&gt;
              &lt;div class="block"&gt;Block 3&lt;/div&gt;
              &lt;div class="block"&gt;Block 4&lt;/div&gt;
              &lt;div class="block"&gt;Block 5&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Isotope is initialised like this (I'm using jQuery):</p>
  
  <pre><code>$(function(){
      var container = $('.blocks');
      container.isotope({
          itemSelector: '.block',
          masonry: {
              columnWidth: 220,
              gutter: 20
          },
          itemPositionDataEnabled: true
      });
  });
  </code></pre>
  
  <p>This works perfectly.</p>
  
  <p>However, I'd like to pull content from a different web page, with exactly the same type of structure and use this as the 'Isotope content'.</p>
  
  <p>I'm loading the content like this, using jQuery <code>load()</code>:</p>
  
  <pre><code>$('nav a').click(function(){
      var link = $(this).attr('url');
      $('.main-content-container').load(link + ' .main-content', function () {
  
          // Content loaded, so re-init Isotope:
          container.isotope({
              itemSelector: '.block',
                  masonry: {
                      columnWidth: 220,
                      gutter: 20
                  },
              itemPositionDataEnabled: true
          });
  
      });
  });
  </code></pre>
  
  <p>Again, this works perfectly in loading the content from the external page into the current page.  It just replaces everything inside the <code>main-content</code> container, which is what I want.  However, the re-initialisation of Isotope just isn't working.  It doesn't error, it just doesn't do anything.</p>
  
  <p>I've tried doing a <code>destroy</code> on the instance of Isotope on click before the AJAX content is loaded.  I've also tried re-initialising Isotope in a synchronous AJAX success callback (rather than asynchronously which is what <code>load</code> does.</p>
  
  <p>Nothing works, and I can't any examples of something like this working where the Isotope container is being replaced in AJAX, only where the content inside it is replaced.  The reason I'm replacing the whole thing is because there's much more content inside this (filters etc) which need to be loaded with it.</p>
  
  <p>Can anyone suggest how to get this working?</p>
  
  <p>Many thanks.</p>