Javascript 如何使滑动功能在表行上动态工作？

我正在使用Cordova开发一个跨平台的移动应用程序。我有一个带有表格的HTML页面。单击时，我有一个按钮

添加行

，将新行添加到我的表中。我需要一个类似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

要将行添加到表中，请执行以下操作：

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

$（“.addmore”）。单击（函数（）{
var行=$（“#cashreg tr”）。长度+1；
$（“#cashreg”）.append（“开始时间
选择项目
员工
价格
删除
”）；
});

对于类似iOS的刷卡：

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

window.addEventListener（'load'，function（）{
var el=document.getElementsByClassName（'cells'）[0]；
ontouch（el，功能（evt，方向，相位，SwipetType，距离）{
var touchreport=“”
touchreport+='Dir:'+Dir+'
'
touchreport+='阶段：'+阶段+'
'
touchreport+='滑动类型：'+SwipetType+'
'
touchreport+='距离：'+Distance+'
'
if（dir==“左”）{
左=parseInt（$（“.cells”）.css（“top”）.replace（/[^\d.]/g'，）-距离；
$（“.cells”）.css（“左”，“-”+左+“px”）
}
if（dir==“right”）{
如果（$（“.cells”）.css（“左”）==“-166px”）{
//左=parseInt（$（“.cells”）.css（“top”）.replace（/[^\d.]/g'，）-距离；
$（“.cells”）.css（“左”，“0px”）
}
}
如果（dir==“无”）{
//document.getElementById（“hi”）.value=el.pageX；
}
})
}，错）
函数ontouch（el，回调）{
var touchsurface=el，
局长，
泳衣，
startX，
斯塔蒂，
distX，
迪西，
阈值=50，//考虑刷卡所需的最小行驶距离
约束=100，//垂直方向上同时允许的最大距离
allowedTime=500，//允许行驶该距离的最大时间
时光流逝，
开始的时候，
handletouch=callback | |函数（evt、dir、phase、swipetype、distance）{}
touchsurface.addEventListener（'touchstart'，函数（e）{
var touchobj=e.changedTouches[0]
dir='none'
SwipType='无'
距离=0
startX=touchobj.pageX
startY=touchobj.pageY
startTime=new Date（）.getTime（）//记录手指首次接触表面的时间
handletouch（e，'none'，'start'，swipeType，0）//使用params dir=“none”、phase=“start”、swipeType=“none”等参数启动回调函数
e、 预防默认值（）
}，错）
touchsurface.addEventListener（'touchmove'，函数（e）{
var touchobj=e.changedTouches[0]
distX=touchobj.pageX-startX//获取手指在接触表面时移动的水平距离
distY=touchobj.pageY-startY//获取手指接触表面时移动的垂直距离
如果（数学。ABS（DISX）>数学。ABS（DISY））{/ /如果水平行进的距离大于垂直，考虑这是水平运动。
dir=（distX<0）？“左”：“右”
handletouch（e，dir，'move'，swipeType，distX）//使用参数dir=“left | right”、phase=“move”、swipeType=“none”等启动回调函数
}
否则{//或认为这是一个垂直运动。
dir=（距离<0）？“向上”：“向下”
handletouch（e，dir，'move'，swipeType，distY）//使用参数dir=“up | down”、phase=“move”、swipeType=“none”等启动回调函数
}
e、 预防默认值（）
//防止在DIV内滚动
}，错）
touchsurface.addEventListener（'touchend'，函数（e）{
var touchobj=e.changedTouches[0]
distX=touchobj.pageX-startX
elapsedTime=new Date（）.getTime（）-startTime//获取经过的时间
如果（elapsedTime=threshold&Math.abs（distY）=threshold&Math.abs（distX）-100）{
$（“.cells”）.css（“左”，“0px”）
}
否则，如果（distX-100）{
$（“.cells”）.css（“左”，“-166px”）
}
否则{
$（“.cells”）.css（“左”，“-166px”）
}
}
}，错）
}

---

如何将此滑动应用于新添加的表行？

问题在于，您将单元格元素与

load

函数中的事件

ontouch

绑定。这意味着只有加载中的元素才会被绑定。您还需要在新创建的行元素上注册

ontouch

事件

在您的示例中，您可以尝试直接使用

ontouch

html属性，即：

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

---

您应该使用事件委派来处理js动态添加的新元素：

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

})

---

希望这有帮助。

谢谢，但如何绑定它们呢？你能帮我编码吗？@Shitsumy bad。编辑了答案。我找不到你。你能发送代码片段吗。或者用简单的方式解释我@Shitsu第二个代码段只是加载函数的第一行，但有一些修改（绑定到body和if）。第一种方法的工作原理与

onclick=“function（）”

完全相同。什么不清楚？我尝试了第一个函数。ontouchstart=“ontouch（this）”，它动态工作，但工作速度较慢。为什么？但是在哪里有这个函数（evt、dir、phase、swipetype、distance）事件呢？你能解释一下怎么做吗？@Zakaria Acharki

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

})