關閉字體真棒按鈕在Firefox上不起作用

Question

我在按鈕內有一個關閉字體的真棒圖標，如下所示：

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

由於它是動態添加到DOM的，因此我正在監聽圖標上的click事件，如下所示：

$(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在Firefox中不起作用 jQuery click函數在firefox上不起作用