phonegap jquerymobile list item press event

Question

I have a problem with my phonegap application on Android. When I tap on a list item, the tap seems to follow through to the next page and the item in the same location as where I had pressed on the previous page is also pressed.

There are two cases where this happens, the first where pressing on a list view item opens a page with a sub-list. And the second where pressing on a list item opens a form. Note that if I long-hold press on an item, this problem does not occur.

This is not a problem when the app is run on iOS.

Any ideas on how to prevent this?

EDIT: Click handler after update (but still suffering with the click-through):

    $(parentListView).on('click', 'li', function(event) {
        event.stopPropagation();
        event.stopImmediatePropagation();
        $.mobile.changePage("#care-plans?id=" + this.id + "&" +
                "name=" + this.name, {
            transition : "none",
            });
    });

Answer 1

Falling through jQM events can be prevented like this:

1. Let's say you have a button which is causing falling through event, it can be prevented like this:

   $('#buttonID').on('click', function (event) {
       event.stopPropagation();
       event.stopImmediatePropagation();
   });
   

2. Similar solution:

   $('#buttonID').on('click', function (event) {
       return false;
   });
   

   This solution has a problem, unlike point 1. return false also acts as a preventDefault(). More about this solution can be found here.

3. First 2 solutions should work in your case. Worst case scenario, don't bind events on the second page. Bind them only in second page pagebefore show event and remove them again in pagehide event. More about jQM event order can be found here.