Font-Awesome onlick issue on Safari, works on Chrome and Firefox

Question

The following works for Font-Awesome with onclick in Chrome and Firefox and Safari.

<img class=“g120 icon-large icon-expand“ border=“0” name=“exp49269” id=“exp49269” alt=“Expand Body” title=“Expand Body" onclick="alert('test')">

The following works for Font-Awesome and onclick on Chrome and Firefox, but not on Safari.

<i class=“g120 icon-large icon-expand” border=“0” name=“exp49269” id=“exp49269” alt="Expand Body" title="Expand Body" onclick="alert('test')"></i>

I have an onclick working for the “img” element in all 3 browsers, but onclick for the "i” element only works on 2 of them. The reason that I need it to be an i element is that when the icon is clicked, I will be changing the class from icon-expand to icon-collapse. Any clues?

Answer 1

The only solution I can think of is calling the JavaScript event from the script source itself. For example, you have:

<i class=“g120 icon-large icon-expand” border=“0” name=“exp49269” id=“exp49269” alt="Expand Body" title="Expand Body"></i>

I assume you already have a function for changing the class, but just to be sure, Using JQuery:

var $exp49269 = $('#exp49269'); // set a variable to store icon ID

function collapseIcon() {

    this.removeClass('icon-expand').addClass('icon-collapse');

}

$exp49269.click(collapseIcon); // call the function on click

If you need it to expand and collapse multiple times, you can use a conditional statement to check if it has a certain class, then execute the class change:

var $exp49269 = $('#exp49269'); // set a variable to store icon ID

function collapseIcon() {

    // check if the clicked icon has the icon-expand or icon-collapse class
    if ($(this).hasClass('icon-expand')) {

        this.removeClass('icon-expand').addClass('icon-collapse');

    } else {

        this.removeClass('icon-collapse').addClass('icon-expand');

}

$exp49269.click(collapseIcon); // call the function on click

I made a jsFiddle to show it working in action, changing the class of a div on order to change color. Different application of the code, but same idea: Fiddle

In the case that you already have a function similar or exactly like this one, the major point here is that calling the event from your script rather than in the HTML element should fix the issue.