title: How to make swipe function work dynamically on a table row?
body: <p>I am developing a cross-platform mobile application using Cordova. I have an HTML page with a table. I have a button <code>add row</code> when clicked adds a new row to my table. I need an iOS-like swipe action to have a delete action. I used <code>touchstart</code> event to swipe a static row in my table. That works fine but not with dynamically created table rows. How to do this swipe action?</p>
  
  <p>This is the code I have so far:</p>
  
  <p><strong>HTML</strong></p>
  
  
  
  <pre><code>&lt;div class="fortable"&gt;
      &lt;table id="cashreg"&gt;
          &lt;tr&gt;
              &lt;td class="tablecellbackground"&gt;&lt;div class="del" id="d1" &gt;&lt;p&gt;Delete&lt;/p&gt;&lt;/div&gt;&lt;div id="cells" class="cells"&gt;&lt;div class="denom"&gt;&lt;p&gt;Start Time&lt;/p&gt;&lt;/div&gt;&lt;div class="cnt"&gt;&lt;p&gt;Select Item&lt;/p&gt;&lt;/div&gt;&lt;div class="tots"&gt;&lt;p&gt;Employee&lt;/p&gt;&lt;/div&gt;&lt;div class="tots1"&gt;&lt;p&gt;Price&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;input type="button" class="addmore"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <p>For adding a row to the table:</p>
  
  
  
  <pre><code>$(".addmore").click(function(){
      var rows = $("#cashreg tr").length+1;
      $("#cashreg").append('&lt;tr&gt;&lt;td class="tablecellbackground"&gt;&lt;div class="cells"&gt;&lt;div class="denom"&gt;&lt;p&gt;Start Time&lt;/p&gt;&lt;/div&gt;&lt;div class="cnt"&gt;&lt;p&gt;Select Item&lt;/p&gt;&lt;/div&gt;&lt;div class="tots"&gt;&lt;p&gt;Employee&lt;/p&gt;&lt;/div&gt;&lt;div class="tots1"&gt;&lt;p&gt;Price&lt;/p&gt;&lt;/div&gt;&lt;div class="del"&gt;&lt;p&gt;Delete&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;');
  });
  </code></pre>
  
  <p>For iOS-like swipe:</p>
  
  
  
  <pre><code>window.addEventListener('load', function(){
      var el = document.getElementsByClassName('cells')[0];
      ontouch(el, function(evt, dir, phase, swipetype, distance){
          var touchreport = ''
          touchreport += '&lt;b&gt;Dir:&lt;/b&gt; ' + dir + '&lt;br /&gt;'
          touchreport += '&lt;b&gt;Phase:&lt;/b&gt; ' + phase + '&lt;br /&gt;'
          touchreport += '&lt;b&gt;Swipe Type:&lt;/b&gt; ' + swipetype + '&lt;br /&gt;'
          touchreport += '&lt;b&gt;Distance:&lt;/b&gt; ' + distance + '&lt;br /&gt;'
          if(dir=="left"){
              left=parseInt(($(".cells").css("top")).replace ( /[^\d.]/g, '' ))-distance;
              $(".cells").css("left","-"+left+"px")
          }
          if(dir=="right"){
              if($(".cells").css("left")== "-166px"){
                  //left=parseInt(($(".cells").css("top")).replace ( /[^\d.]/g, '' ))-distance;
                  $(".cells").css("left","0px")
              }
          }
          if(dir=="none"){
              // document.getElementById("hi").value=el.pageX;
          }
      })
  }, false)
  
  function ontouch(el, callback){
      var touchsurface = el,
      dir,
      swipeType,
      startX,
      startY,
      distX,
      distY,
      threshold = 50, //required min distance traveled to be considered swipe
      restraint = 100, // maximum distance allowed at the same time in perpendicular direction
      allowedTime = 500, // maximum time allowed to travel that distance
      elapsedTime,
      startTime,
      handletouch = callback || function(evt, dir, phase, swipetype, distance){}
  
      touchsurface.addEventListener('touchstart', function(e){
          var touchobj = e.changedTouches[0]
          dir = 'none'
          swipeType = 'none'
          dist = 0
          startX = touchobj.pageX
          startY = touchobj.pageY
          startTime = new Date().getTime() // record time when finger first makes contact with surface
          handletouch(e, 'none', 'start', swipeType, 0) // fire callback function with params dir="none", phase="start", swipetype="none" etc
          e.preventDefault()
      }, false)
  
      touchsurface.addEventListener('touchmove', function(e){
          var touchobj = e.changedTouches[0]
          distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
          distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
          if (Math.abs(distX) &gt; Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement
              dir = (distX &lt; 0)? 'left' : 'right'
              handletouch(e, dir, 'move', swipeType, distX) // fire callback function with params dir="left|right", phase="move", swipetype="none" etc
          }
          else{ // else consider this a vertical movement
              dir = (distY &lt; 0)? 'up' : 'down'
              handletouch(e, dir, 'move', swipeType, distY) // fire callback function with params dir="up|down", phase="move", swipetype="none" etc
          }
          e.preventDefault()
          // prevent scrolling when inside DIV
      }, false)
  
      touchsurface.addEventListener('touchend', function(e){
          var touchobj = e.changedTouches[0]
          distX = touchobj.pageX - startX
          elapsedTime = new Date().getTime() - startTime // get time elapsed
          if (elapsedTime &lt;= allowedTime){ // first condition for awipe met
              if (Math.abs(distX) &gt;= threshold &amp;&amp; Math.abs(distY) &lt;= restraint){ // 2nd condition for horizontal swipe met
                  swipeType = dir // set swipeType to either "left" or "right"
              }
              else if (Math.abs(distY) &gt;= threshold &amp;&amp; Math.abs(distX) &lt;= restraint){ // 2nd condition for vertical swipe met
                  swipeType = dir // set swipeType to either "top" or "down"
              }
          }
          // Fire callback function with params dir="left|right|up|down", phase="end", swipetype=dir etc:
          handletouch(e, dir, 'end', swipeType, (dir =='left' || dir =='right')? distX : distY)
          e.preventDefault()
          if(dir=="left"){
              if(distX&gt;-100){
                  $(".cells").css("left","0px")
              }
              else if(distX&lt;-50 &amp;&amp; distX&gt;-100){
                  $(".cells").css("left","-166px")
              }
              else{
                  $(".cells").css("left","-166px")
              }
          }
      }, false)
  }
  </code></pre>
  
  <p>How to make this swipe apply to a newly added table row?</p>