Come far funzionare la funzione di scorrimento dinamicamente su una riga della tabella?

Question

Sto sviluppando un'applicazione mobile multipiattaforma che utilizza Cordova. Ho una pagina HTML con una tabella. Ho un tasto add row quando clicco aggiunge una nuova riga alla mia tabella. Ho bisogno di un'azione di scorrimento simile a iOS per avere un'azione di eliminazione. Ho usato l'evento touchstart per far scorrere una riga statica nella mia tabella. Funziona bene ma non con righe di tabella create dinamicamente. Come fare questa azione di scorrimento?

Questo è il codice che ho finora:

HTML

<div class="fortable"> 
    <table id="cashreg"> 
     <tr> 
      <td class="tablecellbackground"><div class="del" id="d1" ><p>Delete</p></div><div id="cells" class="cells"><div class="denom"><p>Start Time</p></div><div class="cnt"><p>Select Item</p></div><div class="tots"><p>Employee</p></div><div class="tots1"><p>Price</p></div></div></td> 
     </tr> 
    </table> 

    <input type="button" class="addmore"> 
</div> 

JavaScript

Per aggiungere una riga alla tabella:

$(".addmore").click(function(){ 
    var rows = $("#cashreg tr").length+1; 
    $("#cashreg").append('<tr><td class="tablecellbackground"><div class="cells"><div class="denom"><p>Start Time</p></div><div class="cnt"><p>Select Item</p></div><div class="tots"><p>Employee</p></div><div class="tots1"><p>Price</p></div><div class="del"><p>Delete</p></div></div></td></tr>'); 
}); 

Per iOS-come colpo:

window.addEventListener('load', function(){ 
    var el = document.getElementsByClassName('cells')[0]; 
    ontouch(el, function(evt, dir, phase, swipetype, distance){ 
     var touchreport = '' 
     touchreport += '<b>Dir:</b> ' + dir + '<br />' 
     touchreport += '<b>Phase:</b> ' + phase + '<br />' 
     touchreport += '<b>Swipe Type:</b> ' + swipetype + '<br />' 
     touchreport += '<b>Distance:</b> ' + distance + '<br />' 
     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) > Math.abs(distY)){ // if distance traveled horizontally is greater than vertically, consider this a horizontal movement 
      dir = (distX < 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 < 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 <= allowedTime){ // first condition for awipe met 
      if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met 
       swipeType = dir // set swipeType to either "left" or "right" 
      } 
      else if (Math.abs(distY) >= threshold && Math.abs(distX) <= 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>-100){ 
       $(".cells").css("left","0px") 
      } 
      else if(distX<-50 && distX>-100){ 
       $(".cells").css("left","-166px") 
      } 
      else{ 
       $(".cells").css("left","-166px") 
      } 
     } 
    }, false) 
} 

Come rendere questo colpo si applica a una riga della tabella appena aggiunta?

Answer 1

Il problema è che si vincolano gli elementi delle celle con l'evento ontouch nella funzione load. Significa che saranno associati solo gli elementi presenti sul carico. È necessario registrare l'evento ontouch anche sul proprio elemento di riga appena creato.

Con il vostro esempio, si potrebbe tentare di utilizzare l'attributo ontouch html direttamente, vale a dire:

<div class="cells" ontouchstart="..."> 

o semplicemente legare l'evento touch al corpo e controllare la classe cells nel gestore:

var el = document.getElementsByTagName('body')[0]; 
ontouch(el, function(evt, dir, phase, swipetype, distance){ 
    if($(evt.target).hasClass("cells")){ 
     // your code 
    } 
}); 

Answer 2

Si dovrebbe utilizzare la delega evento on() a che fare con nuovi elementi aggiunti in modo dinamico di JS:

$("body").on('touchstart click','#cashreg tr', function(e){ 

}) 

Spero che questo aiuti.