Svelte: wrong button triggered click event

Question

Svelte: wrong button triggered click event

My current setup involves a svelte app in which:

Clicking a button labeled "Show" triggers the display of an input text box and a save button by setting a show variable to true.
Upon clicking the "Save" button, a function is called that changes the show variable back to false.

After running some tests, I noticed that clicking "Show" also seems to activate the on:click event of "Save." I checked Google and found suggestions to add stopPropagation to resolve this issue, but that didn't work for me. Can anyone provide any insight into what mistake I might be making?

If you want to take a look at the code, you can find it here:

javascript svelte svelte-3

Answer 1

Answer №1

I decided to clone the repl and made some modifications to it

Here is the updated code snippet:

<script>
    var name = ''
    let names=[];
    let show=false;
    function addName(){
        console.log("Clicked");
        show=false;
        if (name.length > 0){
            names.push(name);
            console.log(names)
        }
    }
</script>
<button on:click={()=>(show=true)} > Show
</button>
{#if show}
<input bind:value={name} type="text">
<button on:click={()=> {addName()}}>Save</button>
{/if}
<h1>Hello {name}!</h1>

You shouldn't encounter a propogation issue because the event listeners are not nested elements

The Save button on:click was originally configured as

<button on:click={addName()}>Save</button>

This setup is inaccurate as on:click={addName()} immediately calls the addName function. If you prefer this syntax, it should be written like this

on:click={addName}

Alternatively, you can use the anonymous function for on:click, which is what I utilized:

on:click={()=> {addName()}}

Answer 2

I decided to clone the repl and made some modifications to it

Here is the updated code snippet:

<script>
    var name = ''
    let names=[];
    let show=false;
    function addName(){
        console.log("Clicked");
        show=false;
        if (name.length > 0){
            names.push(name);
            console.log(names)
        }
    }
</script>
<button on:click={()=>(show=true)} > Show
</button>
{#if show}
<input bind:value={name} type="text">
<button on:click={()=> {addName()}}>Save</button>
{/if}
<h1>Hello {name}!</h1>

You shouldn't encounter a propogation issue because the event listeners are not nested elements

The Save button on:click was originally configured as

<button on:click={addName()}>Save</button>

This setup is inaccurate as on:click={addName()} immediately calls the addName function. If you prefer this syntax, it should be written like this

on:click={addName}

Alternatively, you can use the anonymous function for on:click, which is what I utilized:

on:click={()=> {addName()}}

Svelte: wrong button triggered click event

Answer №1

Similar questions

Guide on installing React packages during runtime

What's the best way to manage endless routing options in express.js?

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

Leverage the values of object properties from a pair of JavaScript arrays containing objects

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Text alignment issue in Material UI Data Grid Component

Registration of Laravel Vue.js components

Attempting to iterate through the div in order to collect all of the checkboxes and assign a label to each one

Working with DOT in URLs using AngularJS UI-Router

The request included an unsupported media type of "text/plain;charset=UTF-8". This caused an error in the NextJS API when interacting with Django Rest Framework

Generating HTML using a filter

Is it possible for me to include the id attribute in an HTML element that has been generated using React

Monitoring data updates within an Angular directive

Extracting data from hidden columns in jQuery DataTables

When a menu item is clicked, apply a class and change the display property to

"Exploring the Power of ZF2 with Restful APIs and Image

Unable to identify the element ID for the jQuery append operation

Ways to change a value in an array within MongoDb

Combining multiple arrays in Node.js to create a single JSON file

What is the most efficient way to save a document in mongoose based on a specific user's