Iscroll Not Loading On A Hashed Link In Jquery Mobile
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.
- All IDs must be unique site-wide since multiple pages can be in the DOM at once.
- When linking to an external page (
<a href="about.html">About</a>
) only thedata-role="page"
element and its descendants will be grabbed (everything else will be ignored). - You cannot rely on
$(document).ready()
because pages grabbed through AJAX do not fire this event, they firepage 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:
- Put
on the link tag:
` - Put
data-ajax="false"
on the link tag:<a data-ajax="false" href="about.html"></a>
- 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/
Post a Comment for "Iscroll Not Loading On A Hashed Link In Jquery Mobile"