FontAwesome 5点击事件？

Question

我想做什么

我刚刚从 Font Awesome 4.7 切换到 Font Awesome 5，除了一件事之外一切都运行良好：在我的网站的一部分中，我使用一个很棒的字体图标作为切换按钮。单击时，我想将 "open" 心形更改为 "closed" 心形图标（fas fa-heart <-> far fa-heart）。我可以通过在浏览器的检查器中更改 SVG 元素中的数据前缀来做到这一点。

问题

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

可能的解决方案

我通读了 Font Awesome 的 "How To" 指南，他们还没有涵盖这样的主题。这是人们想要做的一件很常见的事情，所以最好能得到一份人们可以使用的解决方案列表。以下是我想到的两个想法，还有一个是 FontAwesome 必须提供的，但我很好奇是否有更好的方法：

在添加侦听器之前使用较短的超时时间 - 然而充其量似乎很老套。
点击时使用包装元素，然后在每次点击时搜索 SVG 元素。
FontAwesome 可以在图标被替换时提供回调。

例子Fiddle

这是一个简化的示例，其中一个按钮动态附加到文档（如果使用 $(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 点击监听器问题。但在这种情况下，此解决方案不起作用。我有一个更好的解决方案，在 <i> 标签上设置 onclick 属性并使用 javascript.

处理 jquery 函数

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

但是正如我在 comment toggleClass 中所说的或任何改变 class 的东西都不能解决你的问题，因为它将 <i> 标签转换为 svg 所以您无法通过切换 class 名称来改变心形。唯一的解决方案是在转换为 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

Answer 2

Fontawsome 有一个很好的例子来说明如何处理他们网站上的点击事件。

这个方法对我很有效，因为我正在寻找 "toggleClass" onClick。似乎比以前的答案简单一些。我已经对此进行了测试，并且运行良好。

document.addEventListener('DOMContentLoaded', function () {
$('button').on('click', function () {
  $(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');
  });
});

Examples Here

我决定为遇到此问题的任何人添加我自己的示例：

document.addEventListener('DOMContentLoaded', function () {
  jQuery('.ppolicy-link').on('click', function () {
            var collapsed=jQuery(this).find('[data-fa-i2svg]').hasClass('fa-plus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').removeClass('fa-minus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').addClass('fa-plus-square');
            if(collapsed)
                jQuery(this).find('[data-fa-i2svg]').toggleClass('fa-plus-square fa-minus-square')
        });
    });

我正在使用 jQuery 无冲突和 Bootstrap 4 手风琴，WordPress。这对我来说非常有用。

FontAwesome 5点击事件？

FontAwesome 5 on click event?

jquery

svg

font-awesome-5