PHP+MySQL环境下含动态ID类名元素的事件绑定问题

我是PHP新手，正在尝试实现类似Facebook的反应系统，但卡在如何选中类名包含当前帖子ID的元素上。反应按钮的类名为class="reaction-toggle--'+postId+'"。我用两个文件分别处理：第一个通过AJAX从MySQL读取帖子，第二个再次调用AJAX获取帖子ID来触发反应弹窗。帖子读取正常，但反应功能报错querySelector返回null（帖子ID确实存在）。

我尝试的代码 #

PHP（获取帖子ID） #

<?php
// 连接数据库
include "conn.php";
// 启动会话
session_start();
// 验证用户会话
if(isset($_SESSION["userId"]) && isset($_SESSION["username"]) && isset($_SESSION["profile_image"]) && isset($_SESSION["first_name"]) && isset($_SESSION["last_name"])) {
    $result = mysqli_query($conn, "SELECT ID FROM posts GROUP BY(ID)");

    $data = array();
    while ($row = mysqli_fetch_object($result))
    {
        array_push($data, $row);
    }
    echo json_encode($data);
    exit();
}else {
    echo "It doesn't work";
}
?>

JavaScript（绑定反应事件） #

var ajax = new XMLHttpRequest();

var method = "GET";

var url = "../new/php/handle_posts_details.php";

var asynchronous = true

ajax.open(method, url, asynchronous)

// 发送AJAX请求
ajax.send()


// 接收PHP响应
ajax.onreadystatechange = function() {
  
  if (this.readyState == 4 && this.status == 200) {
  
      // 转换JSON为数组
      var data = JSON.parse(this.responseText);
      // 遍历帖子ID绑定事件
      for(var i = 0; i < data.length; i++) {
        var ID = data[i].ID;

        // 绑定鼠标进入/离开事件
        document.querySelector('.reaction-toggle--'+data[i].ID+'').addEventListener("mouseenter",function(e){
          document.querySelector('.container').style.display = "block";
        });
        document.querySelector('.reaction-toggle--'+data[i].ID+'').addEventListener("mouseleave",function(e){
          document.querySelector('.container').style.display = "none";
        });
        document.querySelector('.reaction-toggle--'+data[i].ID+'').addEventListener("mouseenter",function(e){
          document.querySelector('.container').style.display = "block";
        });
        document.querySelector('.reaction-toggle--'+data[i].ID+'').addEventListener("mouseleave",function(e){
          document.querySelector('.container').style.display = "none";
        });
      }
      console.log(data);
  }
}

反应按钮HTML（编辑补充） #

<a id="default-like-'.$ID.'" href="#/" class="post__action post__action--reaction reaction reaction__toggle reaction-toggle--'.$ID.' reaction-emoticon-0 js-reaction-toggle" style="display: none;">
  <span>Like</span>
</a>

返回的JSON示例（编辑补充2） #

[{"ID":"36"},{"ID":"54"},{"ID":"55"},{"ID":"57"},{"ID":"58"},{"ID":"60"}]

问题原因及解决方法 #

核心问题 #

1. 元素加载顺序不匹配：处理反应的AJAX先完成，但此时读取帖子的AJAX还没把反应按钮渲染到DOM中，导致querySelector找不到元素返回null。
2. 循环闭包陷阱：用var声明的变量在循环中会被共享，即使元素存在，所有事件也会绑定到最后一个ID对应的元素。
3. 冗余事件绑定：重复绑定了两次相同的mouseenter和mouseleave事件，完全没必要。

具体修复步骤 #

1. 合并AJAX请求，确保元素渲染后再绑定事件

不要分开两个AJAX请求，在读取帖子并渲染HTML的同一个AJAX回调里完成事件绑定，保证元素已经存在于DOM中。

2. 修复循环变量问题

用let代替var声明循环变量，确保每次迭代的变量都是独立的：

for(let i = 0; i < data.length; i++) {
  const postId = data[i].ID;
  // ...后续代码
}

3. 使用事件委托优化（推荐）

如果帖子是动态加载的，把事件绑定到父容器上，不需要为每个按钮单独绑定事件，更高效且避免加载顺序问题：

// 假设帖子都包裹在.posts-container容器里
const postsContainer = document.querySelector('.posts-container');

// 鼠标进入事件
postsContainer.addEventListener('mouseenter', function(e) {
  const toggleBtn = e.target.closest('.reaction-toggle');
  if (toggleBtn) {
    document.querySelector('.container').style.display = 'block';
  }
});

// 鼠标离开事件
postsContainer.addEventListener('mouseleave', function(e) {
  const toggleBtn = e.target.closest('.reaction-toggle');
  if (toggleBtn) {
    document.querySelector('.container').style.display = 'none';
  }
});

4. 绑定事件前检查元素是否存在

在调用addEventListener前先判断元素是否存在，避免报错：

const toggleBtn = document.querySelector(`.reaction-toggle--${postId}`);
if (toggleBtn) {
  toggleBtn.addEventListener('mouseenter', function() {
    document.querySelector('.container').style.display = 'block';
  });
  toggleBtn.addEventListener('mouseleave', function() {
    document.querySelector('.container').style.display = 'none';
  });
}

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