jQuery Mobile + Flexslider2

Question

У меня возникли огромные проблемы с получением jQuery Mobile для работы с другими библиотеками Javascript - в моем случае Flexslider 2 (http://flex.madebymufffin.com/examples/basic.html).

У меня есть пара страниц, где я хочу использовать flexslider в дополнение к jQM. К сожалению, слайдер не работает/не загружается, когда я нажимаю ссылки на моем сайте.

Я знаю, что это связано с тем, как jQM загружает страницы - загружая их с помощью AJAX и добавляя их в DOM.

Я уже много часов ищу, чтобы узнать, как использовать такие события, как «pagehow» и «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

Попробуйте поместить его в обратный вызов страницы. Как и ...

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

Я уверен, что кто-то более знающие могут звонить в том, почему это необходимо, но я 99% уверен, что это путь.

Наслаждайтесь!

Answer 2

Вы можете добавить rel="external" или data-ajax="false" на страницу FlexSlider, которая может отключить загрузку Ajax страницы. Вы можете обратиться к документу here

Answer 3

У меня была эта проблема. Flexslider на индексной странице сайта JQuery Mobile будет работать при первом переходе на него, но не при возврате через меню или кнопку возврата.

Я использовал '' pageshow событие, а не событие '' pageinit 'и она работала отлично:

$ (документ) .bind ('pageshow', функция() {$ ( ' FlexSlider.) .flexslider ({ анимация: «слайд», }); });