title: How to reinitialize Owl Carousel after ajax call?
body: <p>I am trying to reinitialize owl carousel after a successful ajax call. The ajax call will change the data but the view should stay the same.I am having an issue where the view carousel structure will not reinitialize. I don't know where I did mistake.</p>
  
  <p>Ajax Request</p>
  
  <pre><code> $(document).on('click', '.category_list', function() {
      var category_id = $(this).attr('data-id');
      var _token = $('#_token').val();
      var param = 'category_id=' + category_id + '&amp;_token=' + _token;
      $.ajax({
          type: "POST",
          datatype: "json",
          url: "/master/sub_category",
          data: param,
          success: function(result) {
              $('#test').html(result);
              var owl = $(".owl-carousel");
              owl.owlCarousel({
                  items: 4,
                  navigation: true
              });
          }
      });    
  });
  </code></pre>
  
  <p>Controller Function</p>
  
  <pre><code>public function getImg() {
      $post_data = Request::all();
      $sub_img = $this-&gt;imgModel-&gt;getImgList($post_data);
      $sub_img_html = '';
      foreach ($sub_img ['data'] as $data_img ) {
          $img = '/img/sub_category/'.$data_img ['img'];            
          $sub_img_html .= '&lt;div class="item"&gt;';
          $sub_img_html .= '&lt;img src="'.$img.'" /&gt;';
          $sub_img_html .= '&lt;/div&gt;';
      }
      echo $sub_img_html;
  }
  </code></pre>
  
  <p>View</p>
  
  <pre><code>&lt;div id="demo"&gt;
      &lt;div id="test" class="owl-carousel"&gt;
          &lt;?php
             if (!empty($img_category)) {
                foreach ($img_category as $imgcategory){
          ?&gt;
          &lt;div class="item"&gt;
            &lt;img src='/img/sub_category/&lt;?= imgcategory['subcategory_img'] ?&gt;'/&gt;&lt;/div&gt;
        &lt;?php
             }
          }
       ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>