Question

I have been developing my first mobile site with jQuery Mobile and you can see it here:

http://m.4playtheband.co.uk/index.php

The slider works fine when you first visit the site but if you navigate to another page and go back the slider doesn’t work.

I believe this is because the defualt jQuery Mobile navigation is done in a kind of AJAX-y way so the slider needs re-initialised which isn’t happening at the moment.

These are the scripts from my header:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>

<script type="text/javascript" charset="utf-8">
    $(window).load(function() {
        $('.flexslider').flexslider({
            animation: "fade",
            slideDirection: "horizontal",
            slideshow: true,
            slideshowSpeed: 7000,           
            animationDuration: 500
        });
    });
</script>

Since I am only using version 1.6.4 then the .live function should still work which I think will fix it but I can’t figure out which event to use?

If someone could help I would much appreciate it.

Answer 1

It’s not ideal but a way to fix it is to simply edit all links to the home page to turn off the default ajax linking and this is done as follows:

<a href="index.php" data-ajax="false">home</a>