Event not being tracked

[Gabriel-p]

Describe the Bug

The code block at the bottom shows several data-umami-event in my page. The first one (aladin_load) is tracked fine, but the ones after it, attached to a button event, are never tracked (UTI2, UTI3). If I use instead:

<script>
const button = document.getElementById('UTI-button');
button.onclick = () => umami.track('UTI');
</script>

then the button event is tracked fine.

Am I doing something wrong?

  <!-- Aladin snippet -->
  <div style="text-align: center;">
      <!-- Static image + data attributes for FOV and target -->
      <img id="aladin_img"
          data-umami-event="aladin_load"
          src="https://raw.githubusercontent.com/ucc23/plots_{{ page.fname | slice: 0, 1 }}/main/aladin/{{page.fname}}.webp"
          alt="Click to load Aladin Lite" 
          style="width:355px;height:250px; cursor: pointer;"
          data-fov="{{page.fov}}" 
          data-target="{{page.ra_icrs}} {{page.de_icrs}}"/>
      <!-- Div to contain Aladin Lite viewer -->
      <div id="aladin-lite-div" style="width:355px;height:250px;display:none;"></div>
      <!-- Aladin Lite script will be loaded after the image is clicked -->
  </div>
  <!-- Aladin snippet -->

  <table style="width:355px;height:250px;">
      <!-- Row 1 (title) -->
      <tr style="background-color: {{page.UTI_COLOR}};">
          <td colspan="5">
              <div class="popup-container-focus" style="display: flex; justify-content: center; align-items: center; gap: 0.5em;">
                    <a
                      class="popup-button-focus"
                      href="{{ site.baseurl }}/faq#what-is-the-uti-parameter"
                      title="UTI parameter">UTI:
                    </a>
                    <button
                      id="UTI-button"
                      class="popup-button-focus"
                      data-umami-event="UTI2"
                    >
                      <a
                        data-umami-event="UTI3"
                        class="uti_value"
                        title="UTI parameter">{{page.UTI}}
                      </a>
                    </button>
                  
                  <div class="popup-message-focus">
                      <strong>UCC Trust Index</strong><br><br>
                      <table>
                          <tr style="background-color: #fafafa;">
                              <td style="text-align: center;">C_N</td>
                              <td style="text-align: center;">C_dens</td>
                              <td style="text-align: center;">C_C3</td>
                              <td style="text-align: center;">C_lit</td>
                              <td style="text-align: center;">C_dup</td>
                          </tr>
                          <tr>
                              <td style="text-align: center; background-color: {{page.UTI_C_N_COL}}; font-weight: bold;">{{page.UTI_C_N}}</td>
                              <td style="text-align: center; background-color: {{page.UTI_C_dens_COL}}; font-weight: bold;">{{page.UTI_C_dens}}</td>
                              <td style="text-align: center; background-color: {{page.UTI_C_C3_COL}}; font-weight: bold;">{{page.UTI_C_C3}}</td>
                              <td style="text-align: center; background-color: {{page.UTI_C_lit_COL}}; font-weight: bold;">{{page.UTI_C_lit}}</td>
                              <td style="text-align: center; background-color: {{page.UTI_C_dup_COL}}; font-weight: bold;">{{page.UTI_C_dup}}</td>
                          </tr>
                      </table><br>
                      <!-- Object summary follows below -->
                      {{page.UTI_summary}}
                  </div>
              </div>
          </td>
      </tr>
      <!-- Row 2 -->
      <tr>
         <th style="text-align: center;"><a href="https://ucc.ar/faq#what-is-the-c3-parameter" title="C3 class">C3</a></th>
         <th style="text-align: center;"><div title="Stars with membership probability >50%">N_50</div></th>
         <th style="text-align: center;"><div title="Radius that contains half the members [arcmin]">r_50</div></th>
       </tr>
       <!-- Row 3 -->
       <tr>
         <td style="text-align: center;">{{page.class3}}</td>
         <td style="text-align: center;">{{page.N_50_val}}</td>
         <td style="text-align: center;">{{page.r_50_val}}</td>
      </tr>
  </table>

The live page is e.g.: here https://ucc.ar/_clusters/melotte25

Database

Umami Cloud

Relevant log output

Which Umami version are you using? (if relevant)

No response

Which browser are you using? (if relevant)

Chrome, Firefox

How are you deploying your application? (if relevant)

No response