initiieren Eulenkarussell auf dynamisch hinzugefügt div

Question

Ich habe eine db mit Film Info. Jetzt möchte ich diese Datenbank mit einem Knopfklick durchsuchen. Wenn Sie darauf klicken, muss ein Array von Suchbegriffen gesucht und an die Ansicht zurückgegeben werden.

all Dies geht nach Plan, aber jetzt möchte ich sie angezeigt werden mag:

Suchbegriff # 1
-> Karussell der Filmplakate für diesen Suchbegriff.

Suchmenl # 2
-> Karussell von Filmplakate zu diesem Suchbegriff.

etc ..

Alles geht gut, ich die Daten und zeigt sie bekommen können. Das einzige Problem ist, dass ich das Karussell nicht zum Arbeiten bringen kann.

Hier ist mein javascript:

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 
    }); 
} 

Dies ist, wie ich Eule Karussell initiieren:

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

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

Wie man sehen kann ich die div dynamisch hinzufügen. Das Eulenkarussell wird nicht aktiviert.

Wenn ich manuell ein Karussell mit Bildern hinzufüge, funktioniert das Eulenkarussell übrigens.

Hat jemand eine Idee, wie ich mein Problem lösen kann?

Vielen Dank für das Lesen (und hoffentlich zu reagieren;))

Answer 1

Sie Eulen-Funktionen verwenden sollten Ihre Artikel, so etwas wie hinzufügen:

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

Hoffnung, das hilft!