Javascript bxSlider在jQuery移动页面的页面更改中不显示

在我的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>

{%为人中的人%}
{{person.firstname person.lastname}}

{%endfor%}
我的页脚

$（函数（）{
var bxSliderPeople=$（“#sliderPeople”）.bxSlider({
自适应高度：正确，
传呼机：错，
onSlideAfter:函数（CurrentSlideEnumber、TotalSlideEqty、currentSlideHtmlObject）{
$（'#sliderPeople.active slide'）.removeClass（'active-slide'）；
$（'#sliderPeople>div'）.eq（currentSlideHtmlObject+1）.addClass（'active-slide'）；
},
onSliderLoad:函数（）{
$（'#sliderPeople>div'）.eq（1）.addClass（'active-slide'）；
}
});
});

下面是对我的问题的描述：

==>当我加载页面B时，滑块显示得很好

==>当我通过a页上的链接访问B页时（=B页通过ajax加载），滑块根本不显示。但是，幻灯片包含在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页时，如何实现滑块也会显示？

更新答案：

您可以使用pagecontainer小部件，而不是pagecreate

从隐藏幻灯片div开始，以防止在页面显示时看到未初始化的幻灯片：

.navi {
    display: none;
}

然后为滑块设置一个全局变量，使其只初始化一次，而不是在每次页面显示时初始化。在事件处理程序中，检查是否显示page2，以及是否尚未初始化滑块。如果不是，则显示容器潜水并调用bxSlider（）：

原始答案：

不要将代码放在通用jQuery ready函数中：

$(function() {... 

尝试pageb的jQM pagecreate事件：

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

这将在pageb加载到DOM后运行代码。注意“#pageB”假设您的页面div为

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

---

使您的ID对应。

一旦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>

$（函数（）{
handleData（）；
});

@Max，请参阅JSFIDLE演示的更新答案：

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