FontAwesome 修改DOM致元素点击事件失效，求解决方案

你的原生JS事件失效的核心原因有两个：

1. 初始代码用querySelector仅获取了第一个.server-control-item元素，无法覆盖所有控制按钮；
2. FontAwesome会将页面中的<i>图标标签替换为<svg>元素，你绑定在原<i>上的事件会随着元素被移除而失效。

而jQuery的事件委托能生效，是因为它把事件绑定在稳定的父元素（#server-list）上，利用事件冒泡机制，不管子元素怎么被替换，只要点击的元素匹配目标选择器，事件就会触发。

方案1：原生JS实现事件委托（推荐） #

和jQuery的思路一致，将事件绑定到一个不会被DOM操作影响的父元素上，通过判断点击目标来触发逻辑。这种方法同时解决了元素替换和多元素绑定的问题，且兼容动态新增的元素。

// 选择稳定的父容器（比如#server-list，或者更接近的.server-handle-options）
const parentContainer = document.querySelector('#server-list');

parentContainer.addEventListener('click', function(e) {
  // 向上查找最近的目标元素（兼容点击svg内部path的情况）
  const targetBtn = e.target.closest('.server-control-item');
  if (targetBtn) {
    console.log("heyyy");
    // 可以获取按钮对应的动作
    const action = targetBtn.getAttribute('api-action');
    console.log('触发操作：', action);
  }
});

方案2：等待FontAwesome完成替换后绑定事件 #

FontAwesome完成图标替换后会触发专属事件，你可以等替换完成后再获取新的<svg>元素绑定事件。但这种方法仅适用于静态页面元素，动态新增的元素需要重新绑定。

// 监听FontAwesome图标初始化完成事件（FontAwesome 6+支持）
document.addEventListener('fa-icons-ready', function() {
  // 获取所有已替换为svg的控制按钮
  const controlItems = document.querySelectorAll('.server-control-item');
  controlItems.forEach(item => {
    item.addEventListener('click', function() {
      console.log("heyyy");
    });
  });
});

// 或者等待页面完全加载（兼容旧版FontAwesome）
window.addEventListener('load', function() {
  const controlItems = document.querySelectorAll('.server-control-item');
  controlItems.forEach(item => {
    item.addEventListener('click', function() {
      console.log("heyyy");
    });
  });
});

方案3：禁止FontAwesome替换为SVG #

如果你的项目不需要SVG图标的特性，可以修改FontAwesome配置，让它保留原<i>标签的字体图标形式，这样原事件绑定逻辑就能正常工作。

// 在FontAwesome加载后初始化前配置
FontAwesome.config.replacement = false;

注意：此方法需要确保项目已正确引入FontAwesome字体文件，否则图标会显示异常。

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