Font Awesome 5 SVG模式下jQuery toggleClass功能不生效如何解决

Font Awesome 5及以上版本默认开启了autoReplaceSvg配置，会自动把页面上带fa类的<i>元素替换为对应的<svg>元素。你初始的点击事件是绑定在还未被替换的<i>元素上的，当<i>被替换为新的<svg>元素后，原有的事件绑定就失效了，所以只有第一次点击能正常触发，后续点击新生成的<svg>元素没有绑定对应事件就没有响应。

有两种常用的修复方案：

方案1：使用事件委托绑定点击事件 #

把点击事件绑定到不会被动态替换的父级元素上，通过事件冒泡机制触发处理逻辑，不管子元素是<i>还是<svg>都能正常响应。
修改后的JS代码如下：

$(function () {
  // 把事件绑定到固定父容器，委托给.post-like元素触发
  $(document).on("click", ".post-like", function () {
    var post_id = $(this).data("id");
    console.log(post_id);
    $(this).toggleClass("active");   
  });  
});

方案2：关闭Font Awesome的自动替换SVG功能 #

如果不需要使用SVG渲染模式，可以直接关闭自动替换配置，让Font Awesome保留<i>元素用Web Font模式渲染，原有事件绑定就不会失效。
在引入Font Awesome的JS脚本之前添加如下配置即可：

window.FontAwesomeConfig = { autoReplaceSvg: false };

HTML代码 #

<div class="container">
  <div class="post-actions">
    <i class="fa fa-heart like-32 fa-2x post-like active" data-id="32"></i>
  </div>
  <div class="post-actions">
    <i class="fa fa-heart like-33 fa-2x post-like" data-id="33"></i>
  </div>
  <div class="post-actions">
    <i class="fa fa-heart like-34 fa-2x post-like" data-id="34"></i>
  </div>
</div>

CSS代码 #

.post-actions {
  margin: 20px;
  background: #fee; 
  i, svg {
    color: #ddd;
    cursor: pointer;
    margin-right: 10px;
  }
  i:hover, svg:hover {
    color: #999;
  }
  i.active, svg.active {
    color: red;
  }
}

原有问题JS代码 #

$(function () {
  $(".post-like").on("click", function () {
    var post_id = $(this).data("id");
    console.log(post_id);
    $(this).toggleClass("active");   
  });  
});

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