FontAwesome 5点击活动？

Question

我想做什么

我刚刚从Font Awesome 4.7切换到Font Awesome 5,除了一件事之外,一切都很好:在我的网站的一部分,我使用字体真棒图标作为切换 - esk按钮.点击后,我想将"开放"的心脏改为"封闭的"心脏图标(fas fa-heart < - > far fa-heart).我可以通过在浏览器的检查器中更改SVG元素中的数据前缀来完成此操作.

问题

我的问题是绑定点击监听器,因为那里的元素被删除并替换为SVG.我动态地将元素添加到具有这些心形图标的页面上,并且在使用JS把手生成HTML之后,我使用jquerys .on("click")方法来获取单击按钮并切换类.当元素没有被替换时,这很好,但随着SVG的变化,新的做法是什么？

可能的解决方案

我阅读了Font Awesome的"如何"指南,但它们还没有涵盖这样的主题.这是人们想要做的常见事情,因此获得人们可以使用的解决方案列表会很不错.下面是我想到的两个想法,但是FontAwesome必须提供的一个想法,但我很好奇是否有更好的方法:

1. 在添加监听器之前使用短暂的超时 - 但最好是hacky.
2. 单击时使用包装元素,然后在每次单击时搜索SVG元素.
3. FontAwesome可以在替换图标时提供回调.

示例小提琴

这是一个简单的示例,其中一个按钮被动态地附加到文档(如果使用$(document).ready(),这可以正常工作,但我正在执行API请求,然后动态生成html).单击该按钮不会调用侦听器,因为元素尚未完成将元素替换为SVG.

https://jsfiddle.net/L748ownw/

<div id='container'></div>

$("#container").append("<i id='heart' class='far fa-heart'></i>");
$(".far").on("click", function() {
  console.log("clicked");
});

此示例适用于FontAwesome 4.7,因为元素未被替换.

Answer 1

在最好的情况下pointer-events: none;将修复svg点击侦听器问题。但在这种情况下，这个解决方案不起作用。我有一个更好的解决方案给你，在标签onclick上设置属性并使用.<i>jqueryjavascript

$("#heart").attr('onClick', 'callFunction(this)');

但正如我所说的comment toggleClass或任何改变都class不能解决你的问题，因为它将<i>标签转换为svg所以你不能通过切换类名来改变心脏的形状。唯一的解决方案是在转换之前更改它，svg如下所示：

 var click = false;
  function callFunction(el) {
    if (!click) {
      $("#container").empty().append("<i id='heart' class='fas fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = true;
    } else {
      $("#container").empty().append("<i id='heart' class='far fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = false;
    }
  }

Working Demo