title: owl carousel, ajax load
body: <p>I'm creating a page that loads external content via ajax.</p>
  
  <pre><code>$(".link").click(function(e) {
      e.preventDefault()
      $("#ajax-container")load("external-file.php");
  });
  </code></pre>
  
  <p>This works but the content in the external files contain a Owl Carousel, which appear in the loaded html, but do not (re)initialise.</p>
  
  <p>According to the Owl docs, and the simialr post here (<a href="https://stackoverflow.com/questions/27802064">How to reinitialize Owl Carousel after ajax call</a>) I need to destroy and then reinitiate the carousel.
  This works perfectly when attached to an independant click. </p>
  
  <pre><code>$(".button").click(function(e){
      e.preventDefault()
      $("#carousel").data('owlCarousel').destroy();
      $("#carousel").owlCarousel();
  });
  </code></pre>
  
  <p>but I need this to happen without an additional click once the ajax file has loaded. I have tried all of the following methods with no luck.</p>
  
  <pre><code>// adding to original
  $(".link").click(function(e){
      e.preventDefault()
      $("#ajax-container")load("external-file.php");
      $("#carousel").data('owlCarousel').destroy();
      $("#carousel").owlCarousel();
  });
  
  // in addition to original
  $(".link-second-classname").click(function(e) {
      e.preventDefault()
      $("#carousel").data('owlCarousel').destroy();
      $("#carousel").owlCarousel();
  });
  
  // ajaxComplete
  $(document).ajaxComplete(function(e){
      e.preventDefault()
      $("#carousel").data('owlCarousel').destroy();
      $("#carousel").owlCarousel();
  });
  
  // ajaxSuccess
  $(document).ajaxSuccess(function(e){
      e.preventDefault()
      $("#carousel").data('owlCarousel').destroy();
      $("#carousel").owlCarousel();
  });
  </code></pre>
  
  <p>Any help or suggestions would be massively appreciated.</p>
  
  <p>Thanks.</p>