bxSlider沒有在頁面上顯示jQuery移動頁面

Question

在我的jQuery移動應用程序中，我有兩個頁面A和B.頁面A包含一個鏈接B. B包含一個滑塊。

頁B：

<div data-role="page"> 
    <div data-role="content"> 
     <div id="list-of-people"> 
      <div class="bxslider-header"> 
       <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain" class="header-right"> 
        <input type="radio" name="sliderNav" id="sliderPrevious" 
          value="sliderPrevious"/> 
        <label for="sliderPrevious">&lt;</label> 

        <input type="radio" name="sliderNav" id="sliderNext" value="sliderNext"/> 
        <label for="sliderNext">&gt;</label> 
       </fieldset> 
      </div> 

      <div id="sliderPeople" class="navi"> 
        {% for person in people %} 
         <div class="slide"> 
           <p>{{ person.firstname person.lastname }}</p> 
         </div> 
        {% endfor %} 
      </div> 
    </div> 
</div> 

<div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
    <p>my footer</p> 

    <script type="text/javascript"> 
     $(function() { 
      var bxSliderPeople = $('#sliderPeople').bxSlider({ 
      adaptiveHeight: true, 
      pager: false, 
      onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
       $('#sliderPeople .active-slide').removeClass('active-slide'); 
       $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide'); 
      }, 
      onSliderLoad: function() { 
       $('#sliderPeople > div').eq(1).addClass('active-slide'); 
      } 
      }); 
     }); 
     </script> 
    </div> 
</div> 

這纔是我的問題的描述：

==>當我加載網頁B時，滑塊顯示就好了。

==>當我通過頁面A上的鏈接（=頁面B通過ajax加載）訪問頁面B時，滑塊完全不顯示。但是，幻燈片包含在DOM中。檢查我的HTML，我看到這樣的事情：

<div class="bx-wrapper" style="max-width: 100%; margin: 0px auto;"> 
    <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 0px;"> 
     <div id="sliderPeople" class="navi" style="width: 1215%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);"> 
      ... 
     </div> 
    </div> 
</div> 

我怎樣才能做到這一點，當我通過網頁A上的網頁鏈接訪問網頁B我的滑蓋也被顯示？

Answer 1

修訂答：

相反pagecreate的，你可以使用pagecontainer部件show event

開始用幻燈片DIV隱藏起來，以免看到他們未初始化的頁面顯示：

.navi { 
    display: none; 
} 

然後有一個滑塊的全局變量，因此它只被初始化一次，而不是每次頁面顯示。在事件處理程序中檢查page2是否正在顯示，並且我們還沒有初始化滑塊。如果沒有，出示容器下潛和調用bxSlider（）：

var bxSliderPeople; 
$(document).on("pagecontainershow", function(event, ui){ 
    if (ui.toPage.prop("id") == 'page2' & !bxSliderPeople) { 
     $(".navi").show(); 
     bxSliderPeople = $('#sliderPeople').bxSlider({ 
      adaptiveHeight: true, 
      infiniteLoop: true, 
      pager: false, 
      onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
       $('#sliderPeople .active-slide').removeClass('active-slide'); 
       $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide'); 
      }, 
      onSliderLoad: function() { 
       $('#sliderPeople > div').eq(1).addClass('active-slide'); 
      } 
     }); 
    } 
}); 

DEMO

原來的答案：

而不是把你的代碼在通用jQuery的準備功能：

$(function() {... 

嘗試JQM pagecreate事件網頁B：

$(document).on("pagecreate","#pageB", function(){ ... 

網頁B已經被加載到DOM後，這將運行代碼。注意「#pageB」假設您的頁面div爲

<div id="pageB" data-role="page"> 

使您的ID對應。

Answer 2

一旦ajax完成，下面的代碼將初始化bxslider。在你的情況下，初始化發生在頁面加載，而bxslider組件在頁面加載後添加。

function getData() { 
    $.ajax({ 
     url : 'example.com', 
     type: 'GET', 
     success : handleData(dataFromServer) 
    }) 
} 

function handleData(data) { 
    var bxSliderPeople = $('#sliderPeople').bxSlider({ 
      adaptiveHeight: true, 
      pager: false, 
      onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) { 
       $('#sliderPeople .active-slide').removeClass('active-slide'); 
       $('#sliderPeople > div').eq(currentSlideHtmlObject + 1).addClass('active-slide'); 
      }, 
      onSliderLoad: function() { 
       $('#sliderPeople > div').eq(1).addClass('active-slide'); 
      } 
      }); 
     }); 
} 

下面的代碼將初始化bxslider在頁面加載櫃面你需要看到bxSlider直接

<script type="text/javascript"> 
     $(function() { 
     handleData(); 
}); 
     </script>