javascript - jQuery Mobile + Flexslider2

Question

我在让 jQuery Mobile 与其他 Javascript 库一起使用时遇到了巨大的麻烦 - 在我的例子中是 Flexslider 2 ( http://flex.madebymufffin.com/examples/basic.html )。

我有几个页面除了 jQM 之外还想使用 flexslider。不幸的是，当我点击网站上的链接时， slider 不起作用/未加载。

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

我已经四处寻找了几个小时，以了解如何使用“pageshow”和“mobileinit”等事件，但我就是无法让它工作，所以非常感谢任何帮助。

这就是我现在正在做的事情:

在我的页面的每个 < head > 部分:

<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

您可以在FlexSlider页面的链接中添加rel="external"或data-ajax="false"，这样可以禁用页面的Ajax加载。可以引用文档here