JavaScript动态生成按钮为何触发函数多次调用？

你的问题核心是重复绑定事件监听器：每次通过Google Places API获取结果并渲染按钮后，你都会执行document.querySelectorAll(".visitor").forEach(...)给按钮绑定点击事件。如果多次渲染（比如多次搜索），同一个按钮会被绑定多次监听器，点击时就会触发多次（次数等于渲染的次数），进而重复调用API。

最优解决方案：事件委托 #

不需要给每个动态生成的按钮单独绑定监听器，而是把监听器绑定到它们的父容器上，利用事件冒泡机制来处理点击。这样只需要绑定一次，不管后续生成多少按钮都能生效，彻底避免重复绑定。

假设你的地点列表按钮都放在一个父容器里（比如类名为places-container的元素），修改客户端代码如下：

// 页面初始化时只绑定一次，不需要在每次渲染地点后重复执行
document.querySelector('.places-container').addEventListener('click', function(e) {
  // 判断点击的元素是否是目标按钮
  if (e.target.classList.contains('visitor')) {
    console.log("eventlistener");
    const placeId = e.target.getAttribute("data-place-id");
    const placeName = e.target.getAttribute("placeName");
    const placeAddress = e.target.getAttribute("placeAddress");
    markVisited(placeName);
  }
});

备选方案：绑定前移除旧监听器（不推荐） #

如果一定要给每个按钮单独绑定，需要确保每次绑定前移除已有的监听器。但因为你用的是匿名函数，无法直接移除，所以需要把事件处理函数提取成命名函数：

// 提取命名函数
function handleMarkVisited(e) {
  console.log("eventlistener");
  const placeId = this.getAttribute("data-place-id");
  const placeName = this.getAttribute("placeName");
  const placeAddress = this.getAttribute("placeAddress");
  markVisited(placeName);
}

// 每次渲染地点后执行：先移除旧监听器，再绑定新的
const markVisitedButtons = document.querySelectorAll(".visitor");
markVisitedButtons.forEach((button) => {
  button.removeEventListener("click", handleMarkVisited);
  button.addEventListener("click", handleMarkVisited);
});

这种方案需要你每次渲染都执行移除+绑定的逻辑，不如事件委托简洁可靠。

额外优化：服务器端代码完善 #

你的服务器端代码存在两个小问题，建议优化：

1. newPlace.save().then(User.updateOne(...)) 中，updateOne的异步操作没有正确处理，且应该用await避免回调嵌套；
2. 函数没有返回响应，客户端的fetch会一直等待直到超时。

修改后的服务器端代码：

router.post("/markVisited", async (req, res, next) => {
  try {
    const newPlace = new VisitedPlace({
      placeName: req.body.placeName,
      userId: req.user._id,
    });
    await newPlace.save();
    // 等待User更新完成
    await User.updateOne(
      { _id: req.user._id },
      { $push: { visitedPlaces: newPlace._id } }
    );
    // 返回成功响应
    res.status(201).json({ message: "地点已标记为已访问", place: newPlace });
  } catch (error) {
    console.log(error);
    // 返回错误响应
    res.status(500).json({ error: "标记失败" });
  }
});

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