Alright, admittedly there are a lot of words here, but this is a problem I've never seen before, and quite a peculiar one at that. So, it will probably be worth the read.

I have a page that dynamically produces Listviews in response to a link clicked from $.mobile.autocomplete.

The listview has two types of <li>'s, and are themed accordingly and have a class set accordingly.
Lets call them l-1 and l-2.

When I click on l-1, what should happen is the following:

1.  That listitem toggles a class that gives the appearance that it is selecte similar to $.ui.selectable - and only one selected item is allowed per list. (This is accomplished easily using basic jQuery.)
2. An ajax call is made sending particular values (based on which l-1 listitem was clicked) to the server.
3. A callback function causes certain text on the page to be highlighted green for the success callback and highlight red on an error or fail callback (this is done using $.then(fn,fn);

What should happen when I click l-2, is that the list is replaced by another list that is the next level down on this particular hierarchy. (I don't think that l-2 has anything to do with this particular issue, and include only for clarity)

A little tricky to implement, but nothing that wasn't straightforward once I figured it out. And it works .... sort of.

All that was just background.  Here is the issue:

If I go to the page once, select an item and then go through the steps above, everything works as expected. (We're just going to look at l-1 here). I can generate a listview through autocomplete as many times as I like, click an l-1 listitem, the style is applied, the ajax fires successfully, the success/fail element is highlighted, voila! 

I'm happy, and pat myself on the back encouragingly.

However, and this is where the real weirdness begins - 

Let's say that I leave the page by going back to the home page (not using the back-button, but just a straightforward jQuery Mobile link), and then once there, I click on the link to bring me back to this page, and I'm back to (lets say the page in question is called Page-2). On Page-2 things start off well: I generate the list using autocomplete, but when I click on an l-1 item, the following happens (or doesn't):

1. The style is not applied to the clicked l-1 listitem.
2. The ajax request is called, and returns success.
3. The success element is highlighted.
4. Strangely the ajax is called twice and returns the same data.

If I leave and come back to Page-2, (this now my third visit) the same thing happens, except:

1. The style is applied to listitem.
2. The ajax call is now made three times.

This pattern continues (presumably for awhile - I tried up to 8 times) in the following manner:

1. On odd #'d trips back, the style is applied, e.g. (the 3rd trip back,5th,7th)
2. One even #'d trips back, the style is not applied. e.g (4th,6th,8th)
3. Each trip back, the number of ajax requests made increases by one. See the photos of the network panel on the first trip, and on the 8th trip (this is generated by nothing other than the same mouse click).

1st Visit, 1 Click

8th Page Vist, 1 Click

Any Insight?