Jak włączyć funkcję przesuwania dynamicznie w rzędzie tabeli?

Question

Zajmuję się tworzeniem wieloplatformowych aplikacji mobilnych przy użyciu Cordova. Mam stronę HTML z tabelą. Mam przycisk add row po kliknięciu dodaje nowy wiersz do mojej tabeli. Potrzebuję akcji machnięcia podobnej do iOS, aby wykonać akcję usuwania. Użyłem zdarzenia touchstart do przeciągnięcia statycznego wiersza w mojej tabeli. Działa to dobrze, ale nie w przypadku dynamicznie tworzonych wierszy tabeli. Jak wykonać tę akcję machnięcia?

Jest to kod mam tak daleko:

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

Aby dodać wiersz do tabeli:

$(".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>'); 
}); 

dla iOS-jak machnięcia:

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) 
} 

Jak to trzepnąć zastosowanie do nowo dodanego wiersza tabeli?

Answer 1

Problem polega na związaniu elementów komórki z wydarzeniem ontouch w funkcji load. Oznacza to, że tylko elementy obecne na ładunku będą związane. Musisz również zarejestrować zdarzenie ontouch na nowo utworzonym elemencie wiersza.

Z Twojego przykład, można spróbować użyć atrybutu ontouch HTML bezpośrednio, tj:

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

lub po prostu związać dotykowy wydarzenie do swojego ciała i sprawdź klasy cells w Handler:

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

Answer 2

należy użyć delegacji zdarzeniu za on() do czynienia z nowymi elementami dodanymi dynamicznie przez JS:

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

}) 

Mam nadzieję, że to pomoże.