当我静态数据时效果完全可以,如图:
但是做好动态获取数据时,效果则是不行没有触发到,文件已经加载到了,如图:
我怀疑是代码执行顺序的问题,但是一直改都是不行,代码如下:
<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
绑定事件。
- 可以通过事件委托,也就是在其确定的祖先元素上绑定事件,根据
event.target
获取触发元素 - 或是在动态改变之后,重新执行绑定事件。