jQuery Mobile not running secondary javascript

Question

I am building a mobile version of an existing site, and I'm looking for an explanation to a problem I'm having (as a jQuery Mobile noob).

This page has a jquery reflection effect on the first image: http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (it does this by applying the effect to any image with a class of 'reflect').

If you go straight to the page, the js loads and the reflection works fine on the image. However, if you've navigated to the page from here, the parent page, the reflection js doesn't work: http://m.fijitourism.com/accommodation/coral-coast/

From what I understand, this is to do with jquery mobile's ajax loading. I've found that if I use 'data-ajax="false"' on the link from the parent page, the reflection js loads okay.

My questions are:

-Is there a better/more correct way to achieve the reflection without using data-ajax="false" on the parent page link? I understand that this isn't really what 'data-ajax="false"' is designed for. The official documentation says to use it 'if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages', which I am not.

-An explanation as to why the ajax loading prevents the reflection js would be great.

Answer 1

Turns out there was a page that I'd missed in the official documentation dealing with this exact issue: http://jquerymobile.com/test/docs/pages/page-scripting.html

To execute code whenever a new page is loaded and created by the Ajax navigation system, you must bind to the pagecreate event.

The pagecreate event is triggered on the page being initialized, right after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

$('#aboutPage').live('pagecreate',function(event){ alert('This page was just enhanced by jQuery Mobile!'); });

Answer 2

This issue is explained here: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html

First of all, after you make sure your script works when you refresh the page with the browser, you can fix the jquerymobile solution.

Basically scripts should be used on all pages in the navigation, and page-specific scripts should be written inside the data-role="page" element. As there was no good example on the jquerymobile site, and it was a bit tricky to actually make this work, I have an example here for making the code work both on jquerymobile ajax navigation, and a page refresh.

// this code is inside the data-role="page" element, as well as the possible script src tag
$(window).on('pageinit', function() {
     // do normal $(document).ready() code here basically
     });
 });