B4J Question [BANano]: [SOLVED] how to maintain element events?

Some valid points here that needed some more investigation on how events work in JavaScript.

Vanilla Javascript:

1. Javascript events is just an array, so adding two times the 'click' event results in the method being called two times.

2. Removing a child in JavaScript does not remove the events. As a programmer, you have to take care of this yourself. Moreover, if a reference to the child is somehere in your code, the events will not be removed.

BANano:

With this info, I'm able to handle a lot of this for you.

For 1.

This is completely the responsibility of the programmer and will not be changed. If you type this:


A safe way could be to disable (off) the handle first before adding it:

But if you need this, then you are probably defining events wrong in your code.

For 2.

I've rewritten the Umbrella JS Remove() and Empty() methods in BANano v2.08 to handle most of this.

So if you write mTarget.Empty, all the events of the children will also be removed. Rest us with one point, what if you have a reference to one of your children? Luckely by the way BAnano is written, this can be resolved quite simply (hooray for me! ). If you have other references in other classes, you will need to set them to null yourself.

As every class holds an inner 'self' variable (which holds all the other variables), one could simply write 'Me = Null'. Unfortunately, the IDE in B4J will give you an error on this line so I've written a new BANano method SetMeToNull which does exactly that.

So to recap:

1. You must make sure you do not add the same event multiple times

2. BANano will take care of events when you use Empty()/Remove() + SetMeToNull

A BANano custom view template in v2.08 has an extra Remove() method which does just that:


Version 2.08+ can be downloaded here: https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764

Alwaysbusy

Thanks for the quick resolve. Appreciated.

This is how i was doing it in my learning curve.

1. Create the body ux elements as one single unit without events, this is meant to replace the body using sethtml, I didn’t use empty before. I now will as I assumed events were deleted.

2. I run sethtml to replace the body, now to include empty and setmetonull

3. I add events to each element I want to have an event using Its id and handleevents and this was done once.

The tricky one was the table. I define the table structure then add the table to an rc including events for the edit and delete buttons per row. This is done in a single method. My page has a refresh button to recreate the table including the events, so now clicking edit was firing a couple of times as per console log.

For example, I click refresh button this replaces the table at an rc and recreates events but when I click edit, it was firing 64 times the last time I checked.

Let me implement your solution. Again thanks, that should do it.