0

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

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

我知道这是因为 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>

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

4

3 回答 3

2

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

于 2013-09-28T00:36:54.780 回答
1

尝试将它放在 pageinit 的回调中。像这样...

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

我敢肯定，更有知识的人可以解释为什么这是必要的，但我 99% 肯定这是要走的路。

享受！

于 2012-06-13T14:05:25.380 回答
0

我有同样的问题。Jquery Mobile 网站的索引页面上的 Flexslider 在第一次导航到时会起作用，但如果通过菜单或后退按钮返回则不会。

我使用了 'pageshow' 事件而不是 ''pageinit' 事件，它运行良好：

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

于 2013-10-02T09:21:50.600 回答