首页 > 开发 > JS > 正文

做左滑删除时touchstart事件无效,用静态数据的时候可以,但是从后台获取数据没有效果?

2017-09-05 05:51:25  来源:网友分享

当我静态数据时效果完全可以,如图:

但是做好动态获取数据时,效果则是不行没有触发到,文件已经加载到了,如图:

我怀疑是代码执行顺序的问题,但是一直改都是不行,代码如下:

<script>    //获取信息    (function(){        $.showLoading();                $.ajax({            url: serverurl,            type: "GET",            data: {              type:'10021',              openid:locaopenid            },            dataType: "JSON",            success: function(ret) {                                ret = eval("("+ret+")");                $(".nick_name").html(ret.data.nickname);                $("#img").attr('src',ret.data.headimgurl);                          },            error: function(jqXHR, textStatus, errorThrown) {              alert(textStatus);             }        });    }());        //获取发表的学客圈    (function(){        $.ajax({            url: serverurl,            type: "GET",            data: {              type:'10090',              openid:locaopenid            },            dataType: "JSON",            success: function(ret) {                ret = eval("("+ret+")");                var str = '';                if (ret.length != '0') {                    for (var i = ret.length - 1; i >= 0; i--) {                        $(".release_num em").html(ret[i].count);//发布总数                        var thumb = ret[i].thumb.split(",")                        str += '<li onclick="go_detail('+ret[i].id+')">'                            +        '<div class="weui_cell slidelefts">'                            +            '<div class="weui_cell_bd weui_cell_primary">'                            +            '<div class="fl_new">'                            +                '<p class="time">'+Gtime_ymd(ret[i].last_reply_at)+'</p>'                                            if (ret[i].content !== "") {                        str    +=                '<p class="msg more">'+ret[i].content+'</p>'                                            }                        str    +=            '</div>'                                        if (ret[i].thumb.length != 0 || ret[i].thumb.length != "") {                        str    +=            '<div class="rt_img">'                            +                '<img src="'+thumb[0]+'?x-oss-process=image/resize,m_fixed,h_200,w_200" alt="">"                            +            '</div>'                                        }                        str    +=           '</div>'                            +            '<div class="slideleft">'                            +                '<span class="bg-red f-white dels">删除</span>'                            +            '</div>'                               +        '</div>'                            +  '</li>'                                                }                                    }else{                    $(".release_num em").html('0');//发布总数                    str += '<div style="color:#5c5c5c; font-size:14px; margin-top:10px; margin-left:10px;">暂无任何发表</div>'                }                $(".list_ul").html(str);                $.hideLoading();            },            error: function(jqXHR, textStatus, errorThrown) {              alert(textStatus);             }        });    }());   </script><script src="./js/slideleft.js"></script>

slideleft.js文件:

window.slideleft = (function($) {  console.log("执行了这个文件")  var listItem = $('.weui_cell_bd'),      listOpts = $('.slideleft');  var onthel = false, // 是否处于最左端      isScroll = false, // 列表是否滚动状态      initX = 0, // 初始X坐标      initY = 0, // 初始Y坐标      endX = 0, // 结束时X坐标      endY = 0, // 结束时Y坐标      moveX = 0, // listItem 移动的距离      expandLi = null; // 是否存在展开的list  var slideMaxWid = listOpts.width();    var handleSlide = (function() {    console.log("走到了这里")    console.log(listItem)    listItem.on('touchstart',function(e){         console.log("我已经走进来了")        // 判断有无已经展开的li,如果有,是否是当前的li,如果不是,将展开的li收起        if( expandLi ){          if( expandLi.parent().index()!==$(this).parent().index() ){            // 判断当前list是左滑还是上下滑            if( Math.abs(endY-initY) < Math.abs(endX-initX) ){              e.preventDefault();             }             expandLi.css('-webkit-transform','translateX('+0+'px)');          }        }       initX = e.targetTouches[0].pageX;       initY = e.targetTouches[0].pageY;       moveX = $(this).offset().left;       $(this).on('touchmove',function(e){                var curY = e.targetTouches[0].pageY;          var curX = e.targetTouches[0].pageX;          var X = curX - initX; // 不断获取移动的距离        $(this).removeClass('animated');        if( Math.abs(endY-initY)<Math.abs(endX-initX) ){          e.preventDefault();          if( moveX==0 ){            if( X>0 ) {              $(this).css('-webkit-transform','translateX('+0+'px)');            }else if( X<0 ){              if( X<-slideMaxWid ) X=-slideMaxWid;              $(this).css('-webkit-transform','translateX('+X+'px)');            }          }          // 已经处于最左          else if( moveX < 0 ){            onthel = true;            if( X>0 ) { // 向右滑              if( X-slideMaxWid>0 ){                $(this).css('-webkit-transform','translateX('+0+'px)');              }else{                $(this).css('-webkit-transform','translateX('+(X-slideMaxWid)+'px)');              }            }else { // 左滑              $(this).addClass('animated');              $(this).css('-webkit-transform','translateX('+0+'px)');            }          }        }else{          isScroll = true;        }      })    })    listItem.on('touchend',function(e){        endX = e.changedTouches[0].pageX;        endY = e.changedTouches[0].pageY;        var X = endX - initX;        $(this).addClass('animated');        //Slide to right or the distance of slide to left less than 20;        if( X>-20||onthel||isScroll ){          $(this).css('-webkit-transform','translateX('+0+'px)');          onthel = false;          isScroll = false;        }else{          $(this).css('-webkit-transform','translateX('+(-slideMaxWid)+'px)');          expandLi = $(this);        }     })  })();})(Zepto);

在此先谢过了哈

解决方案

因为你的数据是后加载的,然后你的html也是动态添加的,而你的js绑定事件是在最开始执行的,也就是并没有给动态添加的listItem绑定事件。

  1. 可以通过事件委托,也就是在其确定的祖先元素上绑定事件,根据event.target获取触发元素
  2. 或是在动态改变之后,重新执行绑定事件。