Q:

How do I bind an event to an elements pageshow when there are multiple pages?

I'm trying to bind to pagechange which is failing to work. Given the following basic page, how do I tell when page 2 is displayed?
<div data-role="page" id='page1'>
  <div data-role="content">
    <h3>Page 1</h3>
    <a href="#page2"
       data-role="button" data-transition="slide" data-inline="true"
       >Open Page 2</a>
  </div>
</div>

<div data-role="page" id='page2'>
  <div data-role="content">
    <h3>Page 2</h3>
    <a href="#page1"
       data-role="button" data-icon="arrow-l" data-rel="back" data-inline="true"
       >Back to page 1</a>
  </div>
</div>

JavaScript
$("#page2").bind("pageshow", function(toPage, ui) {
  console.log($(this));
  console.log(toPage);
});

The change event never fires, though if I use $(document) then it fires, but both $(this) and toPage
I wish to know when page2 is first presented so I can perform functions to retrieve remote data.

A:

Page events should be bound like this:
$(document).on("pageshow", "#page2" ,function(toPage, ui) {
   console.log($(this));
   console.log(toPage);
});

Working example: http://jsfiddle.net/qvZst/
But if you want to do something when page2 is available for the first time then you need to use page event called pagebeforecreate
$(document).on("pagebeforecreate", "#page2" ,function() {
   console.log($(this));
   console.log(toPage);
});

Unfortunately pagebeforecreate don't have a toPage because it is a page that is about to be loaded. pagebeforeshow can also be used because it will trigger before page is shown and you can use it to access previous page data.
To find out more about page events and their order take a look at my blog ARTICLE.
There's also another solution, you can also do it during the pagebeforehide of a page1 but it will trigger after pagebeforecreate of a page 2. Page event sequence can be found in my article.

