为什么绑定点击事件的文本元素仅可点击一次后就失效？

问题成因 #

这个问题属于典型的动态元素事件绑定失效问题，核心原因如下：

• 你目前使用的是$(".username").click()的直接绑定写法，这个方法只会给绑定代码执行时已经存在于DOM树中的所有.username类元素绑定点击事件。
• 如果你的用户名元素是动态生成插入的（比如聊天消息逐条加载、后续新增消息），或是原有消息区域被局部重绘、DOM元素被替换重建，那么后续新生成的.username元素没有被绑定上你写的点击逻辑，就会出现点击无响应的情况。
• 部分场景下如果你的代码逻辑会重复执行事件绑定，也可能出现事件冲突、触发异常的问题。

修复方案 #

把直接绑定改为事件委托写法，将事件绑定到不会被销毁的父级容器上（比如所有消息的外层容器，这里假设是.message-list，你可以替换成你实际的父容器选择器）：

// 把事件绑定到不会随消息更新被销毁的父容器上
$(".message-list").on("click", ".username", function() {
  var username = $(this).data("value");
  var userIndex = users[username].length - 1;
  while(userIndex >= 0) {  
    console.log('hello', username)
    userIndex -= 1;
  }
});

这种写法利用事件冒泡机制，所有后代元素的点击事件都会冒泡到父容器上，再匹配选择器执行对应逻辑，不管后续新增多少.username元素，都能正常触发点击逻辑，不需要重复绑定。

提示：选择父容器时尽量选离.username最近的、不会被动态删除的稳定容器，比直接绑定到document上性能更好。

内容的提问来源于stack exchange，提问作者Letscode