What event to use to call taphold?

What event to use to call taphold?

I'm technically using a separate script for taphold instead of jQuery Mobile, but when I tested with JQM I had the same problem.

I have a page (infinite scroll) with potentially 2000+ elements. I want the user to be able to taphold any one of these elements to run an Ajax script.

What is the proper event to use in order to trigger the taphold?

Here is my code:

  1. function holdClick(id, username) {
  2.   $('#list_' + id).on('taphold', function(e) {
  3.     alert('worked');

  5.     // I tried removing the following 2 lines, but it had no impact on the problem
  6.     e.stopImmediatePropagation();
  7.     return false;
  8.   });
  9. }

  11. // CSS
  13. [data-listid] {
  14.   height: 110px;
  15.   padding: 10px;
  16.   margin-bottom: 20px;
  17.   border: 1px solid #C7D9E3;
  18.   border-radius: 4px;
  20.   -webkit-touch-callout: none;
  21.   -webkit-user-select: none;
  22.   -khtml-user-select: none;
  23.   -moz-user-select: none;
  24.   -ms-user-select: none;
  25.   user-select: none;
  26.   -webkit-tap-highlight-color: rgba(0,0,0,0);
  27. }

  29. [data-listid]:hover { background: #F5F7F9 }

  32. // Example of the HTML
  33. <div id="list_12345" data-listid="12345" data-user="csdude55"
  34.   itemscope itemtype="http://schema.org/Product"
  35.   onClick="holdClick('12345', 'csdude55')">
  36.     Blah blah blah
  37. </div>

The problem I'm having is that it doesn't work when I hold the first time, but after I let off and taphold several times it will finally work. I can't figure out if the problem is with the onClick (I also tried using onMouseDown), the script I'm using, the :hover in CSS, or the JQM script.