Alpinejs @click not firing when a span/svg inside a button is clicked.

I'm running into an issue I haven't seen before.

I have multiple buttons that change content on the right-hand side of the page when clicked. Each button has a span and SVG element inside it. The alpine click method isn't fired when you click where the span or SVG is. If I click outside of those areas, it works just fine.

<button @click.stop="primaryNavToggle($event)" value="1">
  <span>Link Label</span>
  <svg>...</svg>
</button>

Snapey

3 years ago

Level 122

First, I would try adding type="button" to the button.

Some old answers here https://stackoverflow.com/questions/14689879/span-inside-button-is-not-clickable-in-firefox

You might need to use (or at least try) another element (such as a) and style it as a button.

Please or to participate in this conversation.