Iscroll Not Loading On A Hashed Link In Jquery Mobile

I've set up an iScroll on a nested div in one of my detail pages in a jQuery mobile site. Basically what happens is when I click on the button on the main page (for an 'about' page

Solution 1:

I'm guessing that you are binding the iScroll initialization within a document.ready handler. If this is the case then you need to change that to a delegated event handler (this is standard jQuery Mobile practice):

$(document).delegate('#about-page-id', 'pageinit', function () {
    var myScroll = newiScroll('id-of-element');
});

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Source: http://jquerymobile.com/demos/1.0/docs/api/events.html

Long story made short: jQuery Mobile uses AJAX to pull new pages into the DOM, this has a number of side-affects.

1. All IDs must be unique site-wide since multiple pages can be in the DOM at once.
2. When linking to an external page (<a href="about.html">About</a>) only the data-role="page" element and its descendants will be grabbed (everything else will be ignored).
3. You cannot rely on $(document).ready() because pages grabbed through AJAX do not fire this event, they fire page events as specified here: http://jquerymobile.com/demos/1.0/docs/api/events.html

If you want to force a reload when linking to another page there are several options:

1. Put on the link tag:`
2. Put data-ajax="false" on the link tag: <a data-ajax="false" href="about.html"></a>
3. Globally disable AJAX handling of links: http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html

But note that using any of these methods will disable transitions.

UPDATE

If you are getting hashed links that means that either you turned off the historyPushState functionality or you are using an old version of jQuery Mobile. If you are using an old version I highly reccommend upgrading to 1.0 (there are lots of performance increases in 1.0 RC3 and 1.0 Final): http://jquerymobile.com/download/