Remove onClick Listener

Ask the community
,
1

Hi, I am looking for the equivalent of Vanilla JavaScript’s removeEventListener to remove an onClick listener.

For example:

$w('#myButton').onClick(() => console.log('Does Something'))
// ...
// Something happens that makes the above listener unwanted.
// ...
$w('#myButton').onClick(() => console.log('Does Another Thing'))

When myButton is clicked, both listeners are invoked. I would like to know how can I remove the first listener if possible.

Thanks

2 
$w('#myButton').onClick(()=> console.log('Does Something'))
$w('#myButton').onClick(()=> console.log('Does Another Thing'))

Whats wrong here ???

Both are refering to the same element (button) ???

You surely have 2 buttons, with different element-IDs, don’t you ?

$w('#myButton1').onClick(()=> console.log('Does Something'))
$w('#myButton2').onClick(()=> console.log('Does Another Thing'))
3

Hi @russian-dima ,

No, in my scenario I’m referring to the same button. I have a button within a repeater that I’m configuring its onClick listener in the $('#repeater').forEachItem, when I’m refreshing the dataset that the repeater is linked with the forEachItem is reinvoked. Anyways my question was whether is there a way to remove an onclick listener that was previously added.

Thanks

4

If you work with REPEATER (inside repeater (intern scope) you will have to use…

$item()

…insted of …

Sw()

… do you recognize the difference???

To remove the onClick-Listener itself is not possible, but you can generate a counter, which will count the clicks. Setting the counter to → 2 and if counter ===2 nothing happens anymore, if counter under 2 click-action.

But still not sure what is the exact problem.

Normal onClick-Action inside a REPEATER…

$w.onReady(()=>{
	$w('#myRepeaterIdhere').onItemReady(($item, itemData, index)=>{
		$item('#myButton').onClick((event)=>{
			console.log(event.target.id);
		)};
	});
});
5

Hi, there’s a removeEventListener equivalent:
Something like:

function handleClick1(){
	console.log('Does Something')
}
function handleClick2(){
	console.log('Does Another Thing')
}

$w.onReady(() => {
$w('#myButton').onClick(handleClick1);
//when you want to remove the click event handler:
$w('#myButton').remvoeEventHandler('click', handleClick1);
//when you want to apply a new handler:
$w('#myButton').onClick(handleClick2);
})
6

By the way, removing the event handler will not change the cursor style back from pointer to auto.
I hope Wix will let us set the cursor style in the future.

7

Never knew this option, good to know THANKS!

8

Yes. I think it’s currently not documented. But I asked the Wix Team if we could rely on it and they said we could use it and they were going to document it.

9

Perfect! (That explains why i never saw this code-snipet) :grin:

10

Yup it works :slight_smile: Cheers!