テーブル行でスワイプ機能を動的に動作させるにはどうすればよいですか？

Question

私はCordovaを使用してクロスプラットフォームのモバイルアプリケーションを開発しています。私はテーブルを持つHTMLページを持っています。クリックしてテーブルに新しい行を追加すると、ボタンadd rowが表示されます。削除操作を行うには、iOSのようなスワイプアクションが必要です。私はtouchstartイベントを使用して、テーブル内の静的な行をスワイプしました。これは正常に動作しますが、動的に作成されたテーブル行では機能しません。このスワイプアクションを行うにはどうすればいいですか？

これは私がこれまで持っているコードです：

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

テーブルに行を追加する場合：

このスワイプが新しく追加されたテーブル行に適用させる方法

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

：iOSのような強打のために10

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

？

Answer 1

問題は、load機能のイベントontouchでセル要素をバインドすることです。ロード時に存在する要素のみがバインドされることを意味します。新しく作成された行要素にもontouchイベントを登録する必要があります。

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

または単にあなたの体にタッチイベントをバインドし、ハンドラでcellsクラスのチェック：

あなたの例を使用すると、すなわち、直接属性ontouch HTMLを使用することを試みることができます

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

Answer 2

あなたはJSによって動的に追加された新しい要素に対処するためのイベント委任on()を使用する必要があります。

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

}) 

希望すると便利です。