JavaScript之按钮重复绑定问题

按钮重复绑定问题

 

1. 按钮绑定：应该减少按钮重复绑定，每个按钮只绑定一次，只有业务多的时候，需要重复绑定，但是绑定前一定要先解绑。

（注：对于像弹出框的按钮绑定，只需创建弹出框的时候绑定一次，因为随着弹出框关闭，弹出框对象已不存在，相应的弹出框里面的按钮绑定也不存在了）

 

2. 例子：

    对于动态改变的按钮，比如信息的“编辑”按钮，建议使用下面的按钮绑定方式：

js 代码:

//点击“编辑”按钮

  $(‘#info-list’).on(‘click’, ‘.btn-edit’, function(){

    var index = $(this).data(‘index’);

    //通过索引，获得信息

    var entity = infoList[index];

    ...

  });

 

HTML代码：

<div id=”info-list”>———————页面只初始化一次，不变的部分

  <div class=”protlet-panel”>————页面动态改变的部分

    <a class=”btn-edit” data-index=”1”>编辑</a>

  </div>

</div>

上面“编辑”按钮的点击事件实际上是绑定在其父元素#info-list上的，而页面动态改变的部分不包括#info-list，所以#info-list一直存在，这样我们就不用每次增加“编辑”按钮时都再次绑定点击事件了。

3. 原理：    

利用事件冒泡来让程序知道我们点击了动态添加的链接元素。（事件冒泡：允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上））