jQuery bxslider動的更新が動作しない

Question

bxsliderでコンテンツを動的に更新する際に問題が発生しています。 HTMLでli項目を入力することで、コンテンツを正常に読み込むことができました。 ul htmlをデータベースの新しいliコンテンツに追加または置換しようとすると、スライダを再読み込みできません。ここに私のスクリプトの重要なマークアップがあります。 console.logにエラーがなく、画像やスライドが表示されない理由はありますか？

var url = 'image/picture.jpg'; 
updateSlider('<li><img src=\''+url+'\'></li>'); 

var slider, sliderConfig = { 
    pager: true, 
    pagerType: 'short', 
    auto: true, 
    slideWidth: screen.width, 
    onSliderLoad: function(){ 
    $('.bx-viewport').css({'height':'100% !important'});}} 

$(function(){ 
    slider = $('.bxslider').bxSlider(sliderConfig); 
}); 

function updateSlider(data){ 
    $('.bxslider').html(data); 
    slider.reloadSlider(sliderConfig); 
} 

Answer 1

次のように試してみてください、あなたはAJAXなどのような任意の遅延機能を使用してデータを持っているだけで後updateSlider('<li><img src=\''+url+'\'></li>');を呼び出すこと。私は、ドキュメント準備に入れているが、あなたは成功したAJAX要求後に実行する必要があります：私は答えを見つけた

var url = 'image/picture.jpg'; 

var slider, sliderConfig = { 
    pager: true, 
    pagerType: 'short', 
    auto: true, 
    slideWidth: screen.width, 
    onSliderLoad: function() { 
     $('.bx-viewport').css({'height': '100% !important'}); 
    } 
} 

function updateSlider(data) { 
    $('.bxslider').html(data); 
} 

$(function() { 
    slider = $('.bxslider').bxSlider(sliderConfig); 

    //update slider on load or after any ajax call success 
    updateSlider('<li><img src=\'' + url + '\'></li>'); 
}); 

$('document').on('click', 'a', function() { 
    slider.reloadSlider(sliderConfig); 
}); 

Answer 2

、ご提案していただきありがとうございます。

問題はCSSにあります。スライダーを再ロードすると、CSSは.bx-wrapper、.bx-viewport、.bxslider、および.bxsliderのli要素で0に設定されていました。私はそれらを必要な高さにリセットすると、それは私の問題を解決しました。

$(".bx-wrapper,.bx-viewport,.bxslider,.bxslider li").css("height",newHeight);