点击事件仅触发一次：如何实现用户名每次点击均生效？

问题原因 #

你当前的点击事件直接绑定在初始渲染的.username元素上，但每次调用renderFeed时，会通过$messageStream.html('')清空原有内容并生成新的消息元素。这些新生成的.username元素并没有绑定点击事件，所以点击事件只能生效一次。

解决方案：使用事件委托 #

将点击事件绑定到一个不会被销毁的父容器上（比如页面固定存在的#feed容器），利用事件冒泡机制，让父容器监听子元素的点击事件。这样不管后续动态生成多少新的.username元素，点击事件都能正常触发。

修改后的代码 #

首先调整newMessage函数，给用户名元素添加用于标识用户的data属性（替代原代码中未设置的id，避免id重复问题）：

var newMessage = function(index, user) {
  var message = user !== undefined 
    ? streams['users'][user][index] 
    : streams.home[index];
  
  var $message = $('<div class="message"></div>');
  var $username = $('<div class="username"></div>');
  
  $username.text('@' + message.user);
  // 添加data属性存储用户名
  $username.data('username', message.user);
  $username.appendTo($message);
  $message.prependTo($messageStream);
}

然后修改点击事件绑定为事件委托：

// 绑定到父容器#feed，监听子元素.username的点击
$('#feed').on('click', '.username', function() {
  $messageStream.html('');
  // 从data属性获取用户名
  var targetUser = $(this).data('username');
  renderFeed(targetUser);
});

补充说明 #

• 事件委托的核心是利用DOM事件冒泡特性，父元素能捕获到子元素的点击事件，哪怕子元素是后续动态生成的。
• 使用data属性存储用户名比id更安全，可避免多个相同用户名的元素出现id重复的问题（id在页面中必须唯一）。

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