前端表单提交问题：需将值提交至点击的单个用户而非点击次数

当前代码存在的核心问题：每点击一次用户，就会给提交按钮新增一个点击事件监听器。当多次点击不同用户后，点击提交按钮会按点击用户的次数重复输出用户信息，无法实现只提交给最后选中的单个用户的需求。

问题原因 #

每次点击.users元素时，都会执行btn_submit.addEventListener('click', ...)，这会不断给提交按钮叠加绑定新的点击事件，旧的事件监听器不会自动移除，导致提交时所有绑定过的监听器都会触发。

推荐解决方案：存储当前选中用户，单次绑定提交事件 #

这种方式更高效，逻辑也更清晰——仅给提交按钮绑定一次点击事件，点击用户时只更新当前选中的用户信息，提交时直接使用最新的信息。

修改后的JavaScript代码：

// 初始化变量存储当前选中的用户信息
let currentSelectedUser = {
  id: null,
  username: null
};

// 仅给提交按钮绑定一次点击事件
document.querySelector('#submit').addEventListener('click', function() {
  // 先判断是否选中了用户
  if (!currentSelectedUser.id) {
    console.log('请先选择一个用户');
    return;
  }
  
  let chatMessage = document.getElementById('message').value;
  // 输出/提交最后选中的用户信息和消息
  console.log(currentSelectedUser.id);
  console.log(currentSelectedUser.username);
  console.log(chatMessage);
  
  // 在这里编写你的Ajax提交逻辑
});

// 点击用户时更新当前选中的用户信息
document.querySelectorAll('.users').forEach(user => {
  user.addEventListener('click', function() {
    currentSelectedUser.id = $(this).data('id');
    currentSelectedUser.username = $(this).data('username');
    
    // 可选：添加用户选中的UI反馈，比如给选中的用户加高亮样式
    // document.querySelectorAll('.users').forEach(u => u.classList.remove('active'));
    // this.classList.add('active');
  });
});

另一种方案：移除旧监听器后重新绑定 #

如果你需要保留原有的事件绑定逻辑，可以先移除之前的监听器，再绑定新的。注意需要将提交逻辑抽成命名函数，才能正确移除：

// 定义提交处理的命名函数
function handleSubmit() {
  let chatMessage = document.getElementById('message').value;
  console.log(this.selectedId);
  console.log(this.selectedUsername);
  console.log(chatMessage);
  
  // Ajax提交逻辑
}

const submitBtn = document.querySelector('#submit');
document.querySelectorAll('.users').forEach(user => {
  user.addEventListener('click', function() {
    // 先移除之前绑定的监听器
    submitBtn.removeEventListener('click', handleSubmit);
    
    // 将当前用户信息挂载到按钮元素上
    submitBtn.selectedId = $(this).data('id');
    submitBtn.selectedUsername = $(this).data('username');
    
    // 重新绑定监听器
    submitBtn.addEventListener('click', handleSubmit);
  });
});

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