jquery - 如何在字体真棒图标上绑定事件？

Question

我想将click事件绑定在一个很棒的字体图标上。然而，图标本身是不可点击的，只有当我插入额外的文本时，该文本才会被绑定。

如何绑定图标本身？

<span class="icon-star">
    only this text is clickable, the icon itself is not
</span>

<script type="text/javascript">
(function($) {
    $('span.icon-star').on('click', function() {
        console.log($(this));
    });
})(jQuery);
</script>

Answer 1

如上所述，给跨度 ablock或inline-block布局将解决问题。至于为什么非标准字体会发生这种情况，我不完全确定，但这可能是由于浏览器无法识别字符并因此假设span标签为空，从而将其折叠为 0 宽度和高度。

Answer 2

这是我使用的另一个解决方案，它似乎更清楚地回答了这个问题，只绑定图标，不需要其他文本。只需将其包装span在您设置 id 的位置即可。这是一个例子：

<span id="menuOpen">
  <i class="fa fa-navicon"></i>
</span> 

 $("#menuOpen").click(showMenu);

希望可以帮助某人。

Answer 3

另一种解决方案是将 onClick 直接写入 i 标记，如下所示：

<i class="fa fa-navicon" onClick="functionName()"></i>

是的，经过数小时的测试，上述解决方案完成了任务，然后我知道这可能是一个很棒的图标问题，搜索把我带到了这里。