Кнопка «Закрыть шрифт» не работает в Firefox

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

Событие щелчка внутри кнопки не работает в 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

Использовать класс 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 3

Попробуйте отправить объект события в функцию

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

Ответьте на вопросы: JavaScript не работает в Firefox Функция jQuery click не работает в Firefox

Answer 4

Вы можете использовать .parent() для выбора кнопки, окружающей значок:

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