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

如上所述，给出block或inline-block布局的范围将解决问题。至于为什么会出现非标准字体，我不完全确定，但可能是因为浏览器无法识别该字符，因此认为span标记为空，因此崩溃它为0宽度和高度。

Answer 2

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

<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>

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

如何绑定字体真棒图标上的事件？

3 个答案: