scroll event gets unbound when back button is clicked #3036

strada opened this Issue Nov 13, 2011 · 4 comments


None yet
3 participants

strada commented Nov 13, 2011

I'm not sure if this is a bug in jQuery (Mobile), or mobile safari's bfcache. I've made an example to illustrate the issue clearly:

The page has and event handler for scroll, and it works as expected in iOS. On the bottom of the page there is an external link, which also shows how many times the scroll event is fired. When you go to the external page and then return by clicking the back button, the event handler does not fire anymore. If I bind to jQuery Mobile scrollstart/scrollstop, these events keep firing after I return to the page with back button.

Prior to iOS 5, I could disable the bfcache by defining an empty onunload handler, but that is not working as of iOS 5.


toddparker commented Nov 14, 2011

This may be because you're binding to document.ready instead of pagecreate?

pagecreate = DOM ready
One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pagecreate event.

The pagecreate event is triggered on a page when it is initialized, right after initialization occurs. Most of jQuery Mobile's official widgets auto-initialize themselves based on this event, and you can set up your code to do the same.

$( document ).delegate("#aboutPage", "pagecreate", function() {
alert('A page with an ID of "aboutPage" was just created by jQuery Mobile!');
If you'd like to manipulate a page's contents before the pagecreate event fires and widgets are auto-initialized, you can instead bind to the pagebeforecreate event:

$( document ).delegate("#aboutPage", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');

strada commented Nov 14, 2011

Actually if I remove the jQuery mobile library, and bind the scroll event handler with jQuery, it is still lost if the user returns the page with back button. Event handler works fine if you load the page again. I'm beginning to think this is a bug in mobile safari bfcache, and not something jQuery can fix.


toddparker commented Nov 14, 2011

Sounds like it. Wonder if it's worth trying this in plain JS to see if it's a jQuery core or Safari issue and log the issue in one o the trackers.

toddparker closed this Nov 14, 2011

For what it's worth, I'm running into a similar issue on my Android and in Mobile Safari with touch events. I'm using jQuery, but not jQuery-Mobile. This is also a few years down the line from your reported issue. I think there's something more fundamental going on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment