Динамическое связывание карточки карусели флипстера

Question

Я использую карту карусели флипстера в своем приложении. Когда я привязываю значения карт статически, мой вид карты близок. Когда я динамически получаю значения, классы carousal не генерируются. Я просто получаю самолет и карты. При передаче данных вручную на тег <li>, флипстер работает нормально. При динамическом переносе данных на <li> с использованием AJAX флипстер не появляется.

STATIC ОБЯЗАТЕЛЬНОЕ: (РАБОЧАЯ FINE)

<ul id="flipsterCard" class="flip-items"> 
    <li data-flip-title="layout 1"> 
    <a onclick="updatevariable()" class="Button Block" 
     style="background-color: #8d65ff;"> 
     <h1>layout 1</h1> 
     <!-- <p>View name</p> 

<img src="resources/images/icon_No_Logo.jpg" width="42" height="42"> 

<p>comments</p> --> 
    </a> 
    </li> 
    <li data-flip-title="layout 2" > 
    <a onclick="updatevariable()" class="Button Block" 
     style="background-color: #6859fb;"> 
     <h1>layout 2</h1> 
     <!-- <p>The bare minimum code needed to implement Flipster</p> --> 
    </a> 
    </li> 
</ul> 

динамическому связыванию (ЗАНЯТИЯ НЕ ЧЕГО LOADED)

function getcard() 
{ 
    $.ajax({ 
    type : "GET", 
    url : context2 + 'getCards?coreId='+coreId, 
    contentType : "application/json", 
    dataType: 'json', 
    async : false, 
    success: function(data) { 
     var $cardList = $('#flipsterCard'); 
     $.each(data, function(i, item) { 
     $('<li class="flipster__nav__item">') 
     .append($('<a onclick="updatevariable();" class="Button Block" style="background-color: red";>')) 
     .append($('<p>').html(item.workspaceViewName)) 
     .append($('<p>').html(item.comments)) 
     $('<img />').attr('src', "item.imgUrl")// ADD IMAGE PROPERTIES. 
     .width('113px').height('113px').appendTo($cardList); 
     }); 
    } 
    }); 
} 

http://brokensquare.com/Code/jquery-flipster/demo/

Answer 1

Вы должны сделать flipster('index'), когда вы динамически меняете количество предметов, которые хотите его визуализировать.