jQuery Mobile: javascript breaks when after loading a page from ajax - ajax

Question

So I've decided to use the jQuery Mobile framework to build my new mobile website. It has this feature of loading any local href link by ajax, which is great. But the new page that loads doesn't respond to any of the javascript. I've got a home page and page 2, both of which have the same html layout which a few changes in the content, I'll give an example.
I have made a navigation menu that slides in from the left and pushes the main content to the right. When I click on a page link, it loads the new page through ajax, but then on the new page, if I click the menu button, jQuery doesn't pick this up and so nothing happens (the menu doesnt slide out).
$(document).ready(function() {
$( ".menu-trigger" ).click(function() {
console.log("1")
if ($( 'nav' ).hasClass('navTransform')) {
console.log("2")
$( 'nav' ).removeClass('navTransform');
$( 'article' ).removeClass('articleTransform');
}
else {
console.log("3")
$( 'nav' ).addClass('navTransform');
$( 'article' ).addClass('articleTransform');
}
});
});
This jQuery script is in a seperate .js file thats included in the header of both the pages. I know the script works normally because when i refresh the page, the menu trigger works. Is there a known work around for this?

Answer 1

The workaround for this is to use appropriate jQM handler pageinit() instead of jQuery ready handler.
pageinit = 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 pageinit event.
So, your code might look like this:
$(document).on("pageinit", "#page1", function(){
//Your init code for page 1 goes here
});
$(document).on("pageinit", "#page2", function(){
//Your init code for page 2 goes here
});