Question

I am using jquery mobile latest version.Everything works fine.I have some custom external and internal JS script.There is a jquery slideshow in the home page, it works well but when I navigate to another page and back to the home page by pressing back button or clicking any link, the slideshow stops working.

If I add in those link data-ajax="false" , then the slideshow works well in every case.But I don’t want to use data-ajax="false" for quick response. How can I solve this problem? I am little bit new in jquery mobile.

Answer 1

According to the docs when you navigate between pages in jQuery Mobile the content is being reloaded by default. When you’re using data-ajax="false" that forces jQuery Mobile to completely reload the page, so your scripts are working.

It seems that you have following slideshow call:

$(function(){
     // init gallery on DOM ready
     $('.gallery').slideshow();
});

But when you’re using jQuery Mobile to navigate between pages you’ll need to reinitialize your gallery when certain page reloaded, so the universal code will look like following:

$(document).bind('pageinit', function() {
     // init gallery when current page loaded
     $('.gallery').slideshow();
});