title: owl carousel plugin doesn't work inside a event click
body: <p>i need to initialize the owl carousel inside a click event like the following code, it works in first time when I click, but when I click it again (on event div) it simply doesn't work. how can I accomplish that? is there a way to reset the owl carousel?</p>
  
  <p>I added my full code to the last part of this post to understand better my pb and to test it. </p>
  
  <p>Could you please help me on this? I really need this.</p>
  
  <p>thanks in advance,</p>
  
  <p>CAFC</p>
  
  <p>source owl carousel : <a href="http://owlgraphic.com/owlcarousel/demos/customJson.html" rel="nofollow">http://owlgraphic.com/owlcarousel/demos/customJson.html</a></p>
  
  <pre><code>$('#XX').click(function(e) {
  
      e.PreventDefault;
  
      $("#owl-demo").owlCarousel({
          jsonPath: 'json/customData2.json',
          jsonSuccess: customDataSuccess
      });
  
      function customDataSuccess(data) {
  
          var content = "";
          for (var i in data["items"]) {
  
              var img = data["items"][i].img;
              var alt = data["items"][i].alt;
  
              content += "&lt;img src=\"" + img + "\" alt=\"" + alt + "\"&gt;"
          }
  
          $("#owl-demo").html(content);
      }
  
  });
  </code></pre>
  
  <p>my full code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Owl Carousel - Dynamic content via JSON&lt;/title&gt;
  
      &lt;!-- Owl Carousel Assets --&gt;
      &lt;link href="../owl-carousel/owl.carousel.css" rel="stylesheet"&gt;
      &lt;link href="../owl-carousel/owl.theme.css" rel="stylesheet"&gt;
  
  
      &lt;script src="../assets/js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="../owl-carousel/owl.carousel.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- Demo --&gt;
  
      &lt;style&gt;
          #owl-demo .item {
              background: #a1def8;
              padding: 10px 0px;
              display: block;
              margin: 5px;
              color: #FFF;
              -webkit-border-radius: 3px;
              -moz-border-radius: 3px;
              border-radius: 3px;
              text-align: center;
          }
      &lt;/style&gt;
  
  
      &lt;script&gt;
          $(document).ready(function() {
  
  
  
              $('#XX').click(function(e) {
  
  
                  $("#owl-demo").owlCarousel({
                      jsonPath: 'json/customData2.json',
                      jsonSuccess: customDataSuccess
                  });
  
                  function customDataSuccess(data) {
  
  
  
                      var content = "";
                      for (var i in data["items"]) {
  
                          var img = data["items"][i].img;
                          var alt = data["items"][i].alt;
  
                          content += "&lt;img src=\"" + img + "\" alt=\"" + alt + "\"&gt;"
                      }
  
                      $("#owl-demo").html(content);
                  }
  
  
  
              });
  
  
  
  
          });
      &lt;/script&gt;
  
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;div id="owl-demo"&gt;&lt;/div&gt;
  
      &lt;div id='XX'&gt;Click HERE!&lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>