通过css循环添加点击事件

需求

在实际的场景中，我们有时候不得不使用最原始的html，css，js实现某些业务需求。
下面将会讲到循环渲染的表格，通过css给每行删除按钮添加点击事件。

实现

1.通过循环渲染html页面。
2.通过css找到删除按钮，添加点击事件。
3.点击事件逻辑处理。

循环生成的html内容如下

`
<div >
  <div class="gf-form btn-update-div-${this.panel.id}" value="${rowIndex}">
    <button class="btn btn-danger btn-small" >
      <i class="fa fa-remove"></i>
    </button>
  </div>
</div>
`

Tips：
这里是通过模板字符串生成的html内容，需要注意的点给每行的删除按钮动态添加了当前唯一标识符this.panel.id，以保证在同一页面，多个循环生成表格的按钮不会互相影响。
value是当前行号。

通过css添加点击事件

  getButtonClick() {
    const dataDiv = '.btn-update-div-' + this.panel.id;
     $(dataDiv).each((i, item) => {
      //index代表每行绑定的value值，和此处的i值其实相同。
       const index = Number(item.getAttribute('value')) || 0; 
       console.log(item,'item')     //item 代表了每一行
         $(item).unbind('click').click(e => {
           console.log(i,'i-index', index)
           this.scope.ctrl.updateData.splice(index, 1);
         });
     });
  }

点击第一行删除效果如下

Tips：
此处主要用到each方法循环得到每一项添加的点击事件。
当页面频繁刷新情况下，则必须先unbind(‘click’) 去除绑定的click事件，否则会触发多次。