Question

我在按钮内有一个非常接近字体的超赞图标，如下所示：

<button type="button" class="btn btn-sm btn-primary">
    Feature A <i class="close-item fas fa-times"></i>
</button>

由于它是动态添加到DOM的，因此我正在监听图标上的点击事件，如下所示：

$(document).on('click', '.close-item', function() {
    console.log("Clicked!");
});

目标是仅在图标（而不是按钮的其余部分）上监听单击事件。它可以在Google Chrome上完美运行，但不能在Firefox中完美运行。如何在Firefox上执行此操作？

谢谢。

Answer 1

按钮内的click事件在Firefox中不起作用，您可以将按钮更改为a标签，如下所示：

<a href="#" class="btn btn-sm btn-primary">
    Feature A <i class="close-item fas fa-times"></i>
</a>

或

<a href="javascript:;" class="btn btn-sm btn-primary">
    Feature A <i class="close-item fas fa-times"></i>
</a>

Answer 2

您可以使用.parent()选择图标周围的按钮：

$('.close-item').parent().click( function() {
    console.log("Clicked!");
});

Answer 3

使用fa类而不是fas

<button type="button" class="btn btn-sm btn-primary"> Feature A <i class="close-item fa fa-times"></i> </button>

这是可行的例子

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa fa-calendar-plus-o"></i> <br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>

Answer 4

尝试将事件对象发送给函数

$('.close-item').on('click', function(event e) {
    console.log("Clicked!");
});

回问： JavaScript onClick does not work in Firefox jQuery click function not working on firefox

关闭字体真棒按钮在Firefox上不起作用

4 个答案: