Question

在我的jQuery移动应用程序中，我有两个页面A和B.页面A包含指向B的链接.B包含一个滑块。

Page 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>

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

==＆GT;当我加载页面B时，滑块显示得很好。

==＆GT;当我通过页面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页时，如何实现我的滑块显示？

Answer 1

更新的答案：

您可以使用pagecontainer小部件而不是pagecreate 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() {...

尝试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>

bxSlider在jQuery移动页面上没有显示页面更改

2 个答案: