jQuery Mobile + Flexslider 2

Question

我遇到了让jQuery Mobile与其他Javascript库一起工作的巨大麻烦 - 在我的案例中是Flexslider 2（http://flex.madebymufffin.com/examples/basic.html）。

我有几页我想在jQM之外使用flexslider。不幸的是，当我点击我网站上的链接时，滑块无法加载/未加载。

我知道这是因为jQM加载页面的方式 - 通过加载AJAX并添加它们来做DOM。

我一直在寻找如何使用“pageshow”和“mobileinit”之类的活动等几个小时，但我无法让它工作，所以任何帮助都非常感激。

这是我现在正在做的事情：

在每个＆lt;头＆gt;我页面的一部分：

<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/jquery.flexslider2.js"></script>

<script type="text/javascript">
    $('#flexslider').bind('pageshow', function(){
        $('.flexslider').flexslider({
            animation: "slide",
        });
    });
</script>

当我手动重新加载页面时，这是有效的，但是当我通过我网站上的链接访问该页面时它不起作用。

Answer 1

您可以将rel="external"或data-ajax="false"添加到FlexSlider页面的链接，这可以禁用页面的Ajax加载。您可以参考文档here

Answer 2

尝试将其置于pageinit的回调中。像这样......

$(document).bind('pageinit', function(){ $('.flexslider').flexslider({ animation: 'slide' ); });

我确信有更多知识渊博的人可以说明为什么这是必要的，但我99％肯定这是要走的路。

享受！

Answer 3

我有同样的问题。 Jquery Mobile站点的索引页面上的Flexslider在首次导航时可以工作，但是如果通过菜单或后退按钮返回则不行。

我使用了'pageshow'事件而不是'pageinit'事件，它运作得很好：

$（document）.bind（'pageshow'，function（）{   $（ 'flexslider'）。flexslider（{     动画：“幻灯片”，   }）; }）;