動的に追加されたdivでフローカルーセルを開始

Question

私は映画情報を含むdbを持っています。今私はボタンをクリックしてこのDBを検索したい。クリックすると、検索用語の配列を検索してビューに戻す必要があります。

このすべてが計画どおりになりますが、今私は次のようにそれらを表示したい：

SEARCHTERM＃1
- この検索用語のための映画のポスターの>カルーセル。

Searchterm＃2
- >この検索語句の映画ポスターのカルーセル。

など。

すべてうまくいく、私がデータを取得し、それを表示することができます。唯一の問題は、カルーセルを動作させることができないことです。ここで

は私のjavascriptです：あなたは、私が動的にdiv要素を追加見ることができるように

$(document).ready(function ($) { 

    $('.owl-slider').owlCarousel({ 
     loop: true, 
     margin: 10, 
     nav: true, 
     navText: ["<", ">"], 
     responsive: { 
      0: { 
       items: 1 
      }, 
      600: { 
       items: 3 
      }, 
      1000: { 
       items: 5 
      } 
     } 
    }); 
}); 

：

function ScanForMovies() 
{ 
    $.ajax({ 
     url: '@Url.Action("ScanForMovies", "Home")', 
     type: 'GET', 
     error: function(XMLHttpRequest, textStatus, errorThrown) 
     { 
      alert(errorThrown); 
     }, 
     beforeSend: function() { 
      $('#loadImage').show(); 
     }, 
     complete: function() { 
      $('#loadImage').hide(); 
     }, 
     success: function (result) { 
      $('#result').append('<div class="owl-carousel-v1 margin-bottom-50">'); 

      $.each(result, function (index, item) { 
       $("#result").append('<h4 class="heading-md">' + item.Title + ' <sup>(' + item.Year + ')</sup></h4>'); 
       $("#result").append('<div id="' + item.Title.replace(/\s/g, '') + '" class="owl-slider">'); 

       $.each(item.Movies, function (ind, it) { 
        $("#" + item.Title.replace(/\s/g, '')).append('<div class="item"><img src="' + ROOT + it.Poster + '" alt="" width="120px" height="120px"/></div>'); 
       }); 

       $("#" + item.Title.replace(/\s/g, '')).append('</div>'); 
      }); 

      $('#result').append('</div>'); 


     }, 
     async: true, 
     processData: false 
    }); 
} 

これは私がフクロウカルーセルを開始する方法です。フクロウカルーセルは活性化されない。

私が手作業でカルーセルに画像を追加すると、フクロウカルーセルがbtwで動作します。

誰かが自分の問題を解決する方法を知っていますか？

読んでくれてありがとう（そして、できれば応答;））

Answer 1

あなたの項目を追加する機能フクロウ使用する必要がある、のようなもの：助け

var owl = $('.owl-slider').owlCarousel({your options}); 
var item = '<div class=" item...">your new div</div>'; 
owl.data('owlCarousel').addItem(item); 
owl.reinit(); 

願っています！