Close font-awesome button not working on Firefox

Question

I have a close font-awesome icon inside a button like so:

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

And since it is dynamically added to DOM I'm listening to click events on the icon like so:

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

The goal is to listen to click events on just the icon (not the rest of the button). It works perfectly on Google Chrome but not in Firefox. How can I make this work on Firefox?

Thanks in advance.

score 1 · Answer 1 · answered Feb 20 '19 at 05:41

1

A click event within a button does not work in Firefox, you can just change the button to an a tag like this:

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

or

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

answered Feb 20 '19 at 05:41

mylee

1,293
1
9
14

It's probably the best solution. Thanks! – random425 Feb 20 '19 at 12:56

score 0 · Answer 2 · answered Feb 20 '19 at 02:22

0

You could use .parent() to select the button surrounding the icon:

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

answered Feb 20 '19 at 02:22

Bruno Robert

302
2
8

Want to list to click events just on the icon, not the rest of the button (updated the question). Thks for your reply. – random425 Feb 20 '19 at 02:35

score 0 · Answer 3 · answered Feb 20 '19 at 02:24

0

Use fa class not fas

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

Here is working example

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

answered Feb 20 '19 at 02:24

Daniel Smith

1,626
3
29
59

The fas tag is font awesome 5. Basically, you just downgraded the OP’s fontawesome version as a fix. – Nate Feb 20 '19 at 02:38

score 0 · Answer 4 · answered Feb 20 '19 at 03:51

0

Try sending event object to function

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

Reffer questions: JavaScript onClick does not work in Firefox jQuery click function not working on firefox

answered Feb 20 '19 at 03:51

DerekN

1
2

Close font-awesome button not working on Firefox

4 Answers4