jQuery Mobile - Do something on page load

Question

I want to do something every time a page loads. It's something that fixes the way the mobile site looks on different devices so it needs to happen on AJAX loads too.

At the moment, I've tried the traditional $(function(){ /*...*/ }); approach but that only works on the first load, and not subsequent AJAX loads.

I've been looking for the right event to bind to but I'm failing pretty hard.

Answer 1

You can use JQuery to bind to each "page" (div's set with the data-role=page attribute) and use the pageshow event (there are some others as well: pagebeforeshow, pagehide, pagebeforehide).

$(document).delegate('.ui-page', 'pageshow', function () {
    //Your code for each page load here
});

http://api.jquerymobile.com/pageshow/

Note: this answer was written for jQuery Mobile 1.0.1, see the documentation link above for more information.

Answer 2

You can listen to the pageshow or pagecreate event and do your work there.

http://jquerymobile.com/test/docs/api/events.html