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

更新答案：

您可以使用 pagecontainer 小部件show event

，而不是 pagecreate

从隐藏的幻灯片 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() {... 

为 pageb 尝试 jQM pagecreate 事件：

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

这将在 pageb 加载到 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>