jQuery Mobile $（document）.ready（）;

Question

我正在尝试制作移动网页。 该页面具有图像滑块。 但是我对document.ready()有问题

我搜索了这个问题，每个人都告诉我使用：

$(document).bind('pageinit', function() {});

但是我认为滑块想要

$document.ready ( or I can't run) 

滑块的名称是bxslider （bxslider.com）

我认为有不同的解决方案：

1. 为jquery mobile禁用ajax加载，将重新加载每个页面，并且文档就绪将起作用。

2. 更改图像滑块。

有人有建议吗？

编辑：我忘了添加代码对不起http://d.pr/n/SNW7

Answer 1

使用像pageshow pagehide这样的事件

$( 'div' ).on( 'pageshow',function(event, ui){
  alert( 'This page was just hidden: '+ ui.prevPage);
});

$( 'div' ).on( 'pagehide',function(event, ui){
  alert( 'This page was just shown: '+ ui.nextPage);
});

http://jquerymobile.com/demos/1.2.1/docs/api/events.html

或类似的东西

$(document).on('pagebeforeshow', '#index', function(){ 
    $('.bxslider').bxSlider({
        slideWidth: 360
    });    
});

Answer 2

我在使用JQM + bxSlider时遇到了同样的问题，经过大量的测试和测试，我找到了JQM的解决方案。

您必须使用$ document.ready和$ {document）.on（'pageshow'

看一下这个例子。 在此示例中，ID为“ Quiz”的页面中有一个名为bxslider的滑块：

<script>
    $(document).ready(function() {
        myCarousel=$('.bxslider').bxSlider({
            captions: false,
            infiniteLoop: false,
            hideControlOnEnd: true,
            slideMargin: 10,
            adaptiveHeight : true
        });   
    });

    $(document).on('pageshow', '#Quiz', function(){ 
        myCarousel.reloadSlider();
    });
</script>

希望这可以帮助。