Outside Bubble, the behavior of re-executing a function when a field’s value changes is not exist, so if you just add event listeners normally, they will just work fine.
In Bubble, adding an event listener inside the “update” function will add a new one every time this function is re-executed due to a field value change.
So I added a flag to prevent re-adding new event listeners, but what happened is that changing the field value does not affect the function attached to the event listener (this value is used inside the function), or… it
doesn’t affect the copy of the function that is attached to the event listener, to update this copy, the event listener should be re-added.
So I just added to the “update” function a line that removes the event listener (.removeEventListener('mousemove', draw)) followed by a line that adds a new event listener (.addEventListener('mousemove', draw);), I thought this would simply update the event listener without duplication, and it succeeded at updating the event listener, but it failed at preventing the duplication, I mean, every time the “update” function executed, a new event listener added, the .removeEventListener() has no effect.
from your other topic about this, your problem is probably a lack of understanding of how to work with event listeners in js.
if you create a function and then you add it as event handler for a listener then you need to use the exact function when you remove the event listener otherwise it will not remove anything. because you build your function every time in the update function you always try to remove a brand new function and fail to remove the previous one.
in your specific case you don’t even need to do the add/remove stuff. you need to add a single listener only once and reference an external variable stored in instance.data. then your update function can update the variable.
This is exactly what I needed to know, now my problem is solved.
Actually, I tried this and it doesn’t work in my case, when the event listener is added for the first time it takes the available “brand” of the related function via the external instance.data. variable, then when this variable updated, nothing happens to the event listener, maybe because this doesn’t affect the DOM.
What I did after your valuable reply is that I added .removeEventListener() and referenced an external instance.data. and assigned to it the previous “brand” of the function, and whenever the “update” function executed, the previous event listener removed using this referenced variable, then a new event listener added using the name of the “brand new” function, then assign this function to the external variable, and now everything works well.
I agree, and I thought I did this when I built the solution totally outside Bubble and went through all the loops I needed to make it work and then came to the plugins to refactor it, but since there are differences between the environment of the plugins and the traditional environments outside Bubble, It seems that some additional loops are inevitable regarding aspects that were not apparent in the environments outside Bubble.
