Font Awesome图标切换功能失效，首次点击后id对应元素事件被浏览器移除

问题根因 #

该问题由Font Awesome 5及以上版本的自动SVG替换机制导致：

• 页面初始化时你绑定事件的<div id="menu-bar">元素，会在Font Awesome加载完成后被自动替换为对应的SVG标签，新生成的SVG会保留原元素的id、类名等属性，但原div元素被销毁时，绑定在它上面的点击事件也会同步失效，这就是首次点击后事件丢失的原因。
• 现有代码仅切换了fa-times类，未同步处理原fa-hamburger类的状态，也是图标无法切换回去的直接原因。

修复方案 #

方案1：使用事件委托（推荐） #

将事件绑定在不会被动态替换的上层DOM节点（比如document或者#menu-bar的直接父容器）上，通过事件委托触发，同时切换两个图标类即可：

$(document).ready(function() {
  $(document).on('click', '#menu-bar', function() {
    $(this).toggleClass('fa-times fa-hamburger');
  })
})

方案2：禁用Font Awesome自动SVG替换 #

如果不需要SVG格式的图标，可以在引入Font Awesome的JS之前添加配置，关闭自动替换特性，原div元素不会被销毁，原有绑定逻辑只要调整类切换规则即可：

1. 新增配置代码：

<script>
  FontAwesomeConfig = { autoReplaceSvg: false }
</script>
<!-- 后续再引入Font Awesome的JS资源 -->

2. 调整原有JS代码：

$(document).ready(function() {
  $('#menu-bar').click(function() {
    $(this).toggleClass('fa-times fa-hamburger');
  })
})

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