需要帮助解决一个被点击但未被点击的按钮的 javascript 问题

Question

好的，所以我有一个正在设计的 Web 界面，但我遇到了问题。它是配置遥控器以控制 ESP32 功能的界面。 ESP32 上的代码绝对不是这里的问题，它是 javascript 中的东西，我肯定是相当新的。这是过程... Web 界面有一种选项卡结构（菜单在顶部，每个“选项卡”的分隔符根据您单击的菜单项隐藏或显示）因此，有一个远程配置选项卡 ()。加载页面时，脚本会向请求远程配置的控制器发送 websocket 命令。然后控制器发回我的 javascript 获取的数据并将其放入分隔线的 innerhtml 中，其中包含与设备配对的遥控器的 html 表列表，以及每个遥控器的编辑/删除按钮以及后退按钮。

删除按钮目前没有实现，因为我想在删除任何东西之前让其他一切正常工作。

编辑按钮将命令传递给控制器，然后将包含一些可编辑数据的新表格和遥控器具有的按钮列表加载到分隔线的 innerhtml 中。

此按钮列表还具有与上述非常相似的编辑和删除功能以及后退按钮。

“编辑按钮”功能上的后退按钮让我很为难。基本上，后退按钮运行与编辑远程功能相同的功能，将远程配置和按钮列表重新加载到 innerhtml 中。

这才是真正的问题......

我点击遥控器上的编辑，它会加载遥控器配置和按钮列表。我单击按钮上的编辑，它加载按钮配置。我点击返回，然后......

脚本发送命令编辑远程 然后... 脚本发送命令来编辑按钮

不应该发送编辑按钮命令。

我在下面提供了一个链接，可以在您没有控制器本身的情况下重现此问题。我还添加了警报消息以明确正在发生的事情。

任何帮助将不胜感激。

链接到 JSFiddle 示例：https://jsfiddle.net/kb1sph/37epovwg/

My code is too big for this post, but to add a jsfiddle link I need a code snippet...so here's a dummy code snippet.

Answer 1

如果你委托（你需要定位按钮本身）你不需要遍历按钮。

增加的好处，解决了你的问题：如果你稍后添加按钮，容器仍然会处理事件

const remotegrid = document.getElementById('remotegrid');
remotegrid.addEventListener("click", (e) => {
  const tgt = e.target.closest("button"); // you can click anywhere on the buttom
  if      (tgt.matches(".remedit")) editrem(tgt);
  else if (tgt.matches(".btnedit")) editbtn(tgt);
  else if (tgt.matches(".remdel"))  delrem(tgt);
  else if (tgt.matches(".btndel"))  delbtn(tgt);
});

为了缩短您的代码，您可以将 fontawesome 加载到设备上并使用像

<i class="fal fa-pencil"></i>

这样的代码而不是 SVG

要进一步缩短它，请查看 template elements