How to reinitialize Owl Carousel after ajax call?
<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>