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>