CODEWITHSUNDEEP
jqueryjquery-mobile
Kaidul
Kaidul

Reputation: 15915

jquery Mobile - javascript stops working after navigating other page

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.

Upvotes: 2

Views: 2418

Answers (2)

Inferpse
Inferpse

Reputation: 4145

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();
});

Upvotes: 3

bobek
bobek

Reputation: 8020

Try doing this on page load:

$(document).ready(function(){
    $('div[data-role=page]').page('destroy').page();
});

It should refresh your page and make everything work again.

Upvotes: 3

Related Questions