Strange bug: JQM dialog + iScroll + PhoneGap on iPad = busted back button

[Chris Stahl]

I'm running into an extremely strange bug when using iScroll with dynamically generated lists and dialogs. The error only shows up in the iPad simulator or when running it on the iPad but not in the browser (Chrome or Safari) during desktop (PC) development.

I've now vested many hours in this and would love some help!

Basically, I have a long list of products that are dynamically generated from a JSON call. When they are populated during pagebeforeshow, it looks like this:

<div id="wrapper">
 <div id="scroller">
  <a href="#" id="prodId1">Prod 1</a>
  <a href="#" id="prodId2">Prod 2</a>
  <a href="#" id="prodId3">Prod 3</a>
  ...etc...
 </div>
</div>

 

The iScroll plugin is created and refreshed after they are populated. Each of these anchor tags has a jquery click event attached to them at creation. This event populates then displays a dialog of information about the product.

Here's the bug:

If I come to the products page from the home page, select a product (without scrolling through the list) which opens its dialog, close the dialog and then click the "back" button in the header, everything functions normally.

Likewise, if I come to the products page, scroll through the products list without selecting a product, click the "back" button, I get back to the home page as normal.

However, if I come to the products page, scroll, select a product, close the dialog and then click the "back" button the page transitions to the home page for a split second, pops back to the products page and at that point the page is broken and I can't navigate anywhere.

Thoughts?