jQuery Mobile not responding to, or not triggering, taps on HTML5 iPhone app (Safari)

We’re using jQuery Mobile to handle gestures and touch events for a iPhone HTML5 web app. Unfortunately, it doesn’t seem to work after a few taps. We’re using JQM 1.3.2, the latest stable, along with jQuery 1.10.1.

To reproduce:

  • Phonegap jQuery Mobile text input
  • jQuery Mobile IOS Only Elastic Scrolling Happening While Not At Bottom of Page issue
  • iOS5 + jquery-mobile transition blinks
  • Screen orientation ios
  • jQuery Mobile prevent scroll-to-top before page transition?
  • Force iOS numeric keyboard with custom / currency pattern
  • 1) Visit www.tekiki.com on an iPhone or www.tekiki.com/dandy/dandy from a desktop.

    2) Swipe left to show the category menu.

    3) Tap on the Games category (not All Games).

    4) After the games render, tap on the Finance category.

    At this point, taps on other categories are ignored. It doesn’t seem like JQM is triggering the tap event since breakpoints in the relevant code below aren’t getting hit.

    Code snippet:

    // Bind what happens when user taps on category
    $( '#templates .category_box' ).on( 'tap', function( ev ) {     
        // Prevent double taps
        ev.preventDefault();
    
        // Set category picked history
        CHOSEN_CATEGORY_ID = $(this).attr('itunes_id');
    
        // Show page
        p_change_page( '#category_page' );
    });
    

    Solutions Collect From Internet About “jQuery Mobile not responding to, or not triggering, taps on HTML5 iPhone app (Safari)”

    Elements should be present in DOM when binding events to them. Even copied / cloned elements are considered dynamic, and the way of binding events to them

    $(document).on('event', '.dynamic', function () {
     // code
    });
    

    Or this way

    $('.static_parent').on('event', '.dynamic', function () {
     // code
    });