js事件注册---<tr >内<a>通过class 注册点击事件

出现一个奇怪的现象

关于文件上传的,在初始化一个编辑页面时,首先要把历史的上传记录文件加载出来,而且这些加载的文件都具有删除的功能

如下图

 

 再页面下边 js内 有一个ajax 获取数据,组装组装,然后网页标识id .  append(tr); 添加到页面上.达到如上效果

这里边的删除事件 有起码两种实现方式,一个是

onclick 事件的方式.这种方式挺不错

 ,'<a href="javascript:void(0);" class="demo-delete"  onclick="javascript: delThisFile(this)">删除</a>'

另一个是 请求到数据后,在通过a 后边的class 注册点击事件 获取 事件

  ,'<a href="javascript:void(0);" class="demo-delete">删除</a>'

这种方式要紧挨着加一个注册事件

tr是 

 for 循环
 var tr = $(['<tr id="upload-' + ret[i].xx+ '">'
    , '<td>' +ret[i].ffff+ '</td>'  //文件名
          , '<td><span style="color: #5FB878;">文件正常</span></td>'
          , '<td>'
       , '<a href="/File.aspx?xxx=' + ret[i].xContent + '" download="' + ret[i].index + '">下载</a> | '
       ,'<a href="javascript:void(0);" class="demo-delete">删除</a>'
         , '</td>'
    , '</tr>'].join(''));

上边是layui upload 里边多文件上传的例子写法,紧接着注册 class 事件,应该叫通过class ,注册a的点击事件

循环内注册
//删除
  tr.find('.demo-delete').on('click', function(){
  delFile('DelFile',ret[i].xContent,'ss'); 
 tr.remove();  });

问题来了: 上边红字ret[i].xContent  因为在循环中,只要带[i]事件是注册不成功的, 点击时能获取到点击事件,提示ret[i].xContent undefinition 未定义

不要说里边因为带了巴巴的上边的传值参数.  在不循环的时候,是注册成功的,提示未定义应该是在编译过程中因为是循环出现了参数变量值没对应的问题吧

上边出现了问题,准备写好了onlick 的方式,但还不死心.

把 ret[i].xContent 的值在 注册事件方法外边  赋值给另一个变量,把另一个变量 挪到注册事件来.问题解决,此方法不管循环多少次.通过一个中间变量过度一下问题解决.. 

 

   var guid=  ret[i]xContent;
     //删除
    tr.find('.demo-delete').on('click', function(){
    delFile('DelFile',guid,'xxx');                           
    tr.remove();
 });
循环结束

 

上边方法只能删除一个, 所以guid 定义的时候需要加i 能保证是个常量,在删除操作的时候能找到这个变量值则能删除 

但此方法是不能实现的,因为变量值无法动态的 命名, 也就是无实际命名的变量不行.用数组的方式,删除的时候也不好找,于是放弃第二种方式

 后来发现跟var let 区别文章里的局部变量是一样的.循环中事件注册用的是循环中最后一个i的值 such as  

https://www.cnblogs.com/zuochanzi/p/14464773.html

1: 输出全是6
for (var i = 1;i < 6;i ++) {
  setTimeout(function fn() {
      console.log(i)
  },i * 1000)
}

输出全是6 说明时间事件用到的是最后一个i 值

一下两种方式正常
for (var i = 1;i < 6;i ++) { // 闭包
  (function(arg){
    setTimeout(function fn() {
        console.log(arg)
    },arg * 1000)
   })(i);//调用时参数
}

for (let i = 1;i < 6;i ++) { // es6
  setTimeout(function fn() {
      console.log(i)
  },i * 1000)
}

看来以上舍弃的事件注册应该实现的需求的,因当时项目实现时间上最后没法子就换了第一种onclick的方式了.

 

 

附记录 删除确认 ,去子元素

   layer.confirm('确定要删除选中的计划项吗',
            {
                title: '删除',
                btn: ['确定', '取消']
            },function(index){
                var p= thisA.parentNode.parentNode;
              // console.log(p.id) ;
                var childs = p.childNodes;
                for(var i = childs.length - 1; i >= 0; i--) {
                    p.removeChild(childs[i]);
                }
                p.parentNode.removeChild(p);
                delFile('DelFile', AnnexContent,flag);
                layer.close(index);
            });