Question

I would like to bind some new events and call some functions on a dynamically loaded page, but the examples out there seem outdated and/or incomplete (even the jqm docs). I am using jQuery 1.7.2 and jQuery Mobile 1.2. What is the correct way to do something like this?

$('#someButton').click(function(e) {
        e.preventDefault();

        $.mobile.changePage("mypage2.html", {
            type: 'GET',
            changeHash: true
        });  

        //BELOW SHOULD BE CALLED WHEN THE PAGE LOADS THOUGH
        doSomething();
        $('#menu_page .request-items', contentScopeOfPage2).click(function (e) {
             doSomethingElse();
        });
});

Answer 1

Generally you setup a delegated event handler for the pseudo-page in question, like so:

$(document).on('pageinit', '#menu_page', function () {
    $(this).find('.request-items').on('click', doSomethingElse);
});

Place this code in the global scope and whenever the #menu_page pseudo-page is initialized (whether it is a remote document or a pseudo-page in the same document) then the click event handler will be set correctly.

Here is a demo: http://jsfiddle.net/mSAzF/