FontAwesome is breaking Events on elements

Question

here is my HTML

<td data-label="Handle" class="server-handle-options noselect">
    <i class="server-control-item fa-solid fa-play" api-action="START"></i>
    <i class="server-control-item fa-solid fa-arrows-rotate" api-action="RESTART"></i>
    <i class="server-control-item fa-solid fa-stop" api-action="STOP"></i>
</td>

My issue is that my code:

// First element of the controls
var controlItems = entryHeadline.querySelector('.server-control-item');
controlItems.addEventListener('click', function () {
    console.log("heyyy");
});

Isnt firing when clicking on the server control Item, it was working before because i was using Jquery:

$("#server-list").on('click', '.server-control-item', function () {   [. . .]   });

Was working, probably because thoses both methods work differently

Here is what the Html looks like in the DOM after the page is fully loaded

<td data-label="Handle" class="server-handle-options noselect">
        <svg class="svg-inline--fa fa-play server-control-item" api-action="START" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="play" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path></svg><!-- <i class="server-control-item fa-solid fa-play" api-action="START"></i> Font Awesome fontawesome.com -->
        <svg class="svg-inline--fa fa-arrows-rotate server-control-item" api-action="RESTART" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrows-rotate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M89.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L370.3 160H320c-17.7 0-32 14.3-32 32s14.3 32 32 32H447.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L398.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C57.2 122 39.6 150.7 28.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM23 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V448c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L109.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H32.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"></path></svg><!-- <i class="server-control-item fa-solid fa-arrows-rotate" api-action="RESTART"></i> Font Awesome fontawesome.com -->
        <svg class="svg-inline--fa fa-stop server-control-item" api-action="STOP" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="stop" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg=""><path fill="currentColor" d="M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"></path></svg><!-- <i class="server-control-item fa-solid fa-stop" api-action="STOP"></i> Font Awesome fontawesome.com -->
    </td>

By logic, it means that FontAwesome make some alteration in the DOM object making my Event Break, what would be the solutions ?

place your icons in buttons then attach the click events to them — Lawrence Cherone, Mar 25 '23 at 19:51
Also note that `.querySelector()` returns at most **one** element. If you want all of them, use `.querySelectorAll()`. — Pointy, Mar 25 '23 at 19:52
@LawrenceCherone that's what I'd do but it should work to click on just the FontAwesome icon, which if it still works the way it used to really is an `` tag with some text in it. — Pointy, Mar 25 '23 at 19:53
Already mentioned by myself with a comment in case people were wondering. — xxxxooxaw, Mar 25 '23 at 19:53
@Pointy its not tag with some text in it. its an empty `` with a`content:"icon code"` CSS on it, OP might have luck by making the icons display:inline-block and placing some padding on it so its more than 0px width height — Lawrence Cherone, Mar 25 '23 at 19:56
I managed to make it work with a SetTimeout then capturing the element with querySelector, but it definitely isnt the best solution — xxxxooxaw, Mar 25 '23 at 19:57
What was already mentioned? The jQuery `$()` is not feature-compatible with the DOM `.query` functions; far from it. If you want to apply event handlers to multiple elements, you have to use `.querySelectorAll()` and then iterate through the returned list of elements with your own code. Or you can devise your own event delegation scheme, which native DOM methods also don't do for you. — Pointy, Mar 25 '23 at 19:57
@LawrenceCherone ah OK, it's been years since I've used it, seems like back in the day it was literally an SVG font. (Maybe it always was and that CSS trick meant that it was all in the style sheet, makes sense.) — Pointy, Mar 25 '23 at 19:58
Sounds like the element is added with AJAX or some other asynchronous process. Use [event delegation](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) like you were with jQuery... — Heretic Monkey, Mar 25 '23 at 20:04

score 0 · Answer 1 · answered Mar 25 '23 at 20:55

Use event delegation to match what jQuery's .on was doing for you.

document.getElementById("server-list").addEventListener('click', e => {
  if (e.target.matches('.server-control-item')) {
    console.log('click');
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<table id="server-list" style="border: 1px solid;">
  <tr>
    <td data-label="Handle" class="server-handle-options noselect">
      <i class="server-control-item fa-solid fa-play" api-action="START"></i>
      <i class="server-control-item fa-solid fa-arrows-rotate" api-action="RESTART"></i>
      <i class="server-control-item fa-solid fa-stop" api-action="STOP"></i>
    </td>
  </tr>
</table>

FontAwesome is breaking Events on elements

1 Answers1