I have a SvelteKit app with an @error.svelte
page at the root of the /routes
folder. Inside of this page, I have two buttons. One is in the header and the other one trigger’s a page event when clicked on. For some reason, neither of these buttons are triggering the on:click
handler when clicked on.
Here is the simplified code
<script>
import Button, { Label } from '@smui/button';
function handleClick() { // Neither the smui button or the native html button run this function
console.log('click');
}
</script>
<div class="page-container">
<Button
variant="unelevated"
on:click={handleClick}> <!--Nothing happens when clicked!-->
<Label>Go Back To Homepage</Label>
</Button>
<button on:click={handleClick}>Click me</button> <!--Nothing happens when clicked!-->
</div>
I have tried the following troubleshooting steps:
- Adding console logs to the function inside
on:click
to see if it’s being called: The function isn’t being called at all. - My buttons are Svelte Material UI buttons. To ensure the error didn’t come from this library, I created a test native html button with an
on:click
handler. This one didn’t call the click function either. - Checked the browser console. I don’t see any errors.
- I looked at this post Thought that there might be an issue with both buttons being in
@error.svelte
located at theroot
of my/routes
folder but I couldn’t understand the answer that well.
Assuming this answer is true, the problem would have been fixed in the native HTML button. But it wasn’t.
Any clue?