jQuery Mobile + Flexslider2

Question

我遇到了很大的麻煩，讓jQuery Mobile與其他Javascript庫一起工作 - 在我的例子中是Flexslider 2（http://flex.madebymufffin.com/examples/basic.html）。

我有幾頁想要使用除jQM以外的flexslider。不幸的是，當我點擊我網站上的鏈接時，滑塊不起作用。

我知道這是因爲jQM加載頁面的方式 - 通過加載AJAX並添加它們來完成DOM。

我一直在找幾個小時現在找出如何使用像「pageshow」和「mobileinit」等事件，但我不能讓它工作，所以任何幫助真的很感激。

繼承人什麼我現在做：

在我的網頁的每個<頭>部分：

<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

試着把它放在pageinit的回調中。是這樣的...

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

我敢肯定有人更見地可以，爲什麼這是必要的附和，但我99％肯定它是要走的路。

享受！

Answer 2

您可以將rel="external"或data-ajax="false"添加到FlexSlider頁面的鏈接中，該頁面可以禁用頁面的Ajax加載。您可以參考文檔here

Answer 3

我有這個相同的問題。第一次導航時，Jquery Mobile網站的索引頁面上的Flexslider可以工作，但如果通過菜單或返回按鈕返回，Flexslider將會工作。

我用了 'pageshow' 事件而不是'pageinit '事件它完美地工作：

的$（document）.bind（ 'pageshow'，函數（）{ $（' flexslider。」 ）.flexslider（{ animation：「slide」， }）; }）;