Button Click Event Only Firing Once?

[DevilZ]

Hello,

I am currently detecting a button click, and then creating a room based on the button that is clicked, and the width and height of a certain div element. After the room forms, there is an option to return to the previous selection via another button. While the room forms, and the back button works as well, if I once more try creating the room after going back, the room doesn’t form, despite it still existing in the hierarchy. I am checking for button clicks using jquery in initialize. I tried shifting the jquery code to update, but that understandably returns undefined for the width and height as the HTML was defined only in initialize. Is there any reason why the room doesn’t form for a second time?

PROJECT - https://playcanvas.com/editor/scene/943414 (to debug, click let’s go, then any height, and then BTDV. Repeat. If any height is clicked for the second time, it won’t work.)

VIDEO -

EDIT - The entire ui.js file seems to be disabled. Why could this be?

[Leonidas]

Hi @DevilZ,

So your issue is that when switching between a room and your main screen, you remove/append the HTML in the container div. But you apply the events only once, in your initialize method (ui.js).

To fix this you will have to apply your click handlers each time you append the HTML back in place.

Using the browser debug tools you can check how your code steps / how many times it executes.

[DevilZ]

@Leonidas

To fix this you will have to apply your click handlers each time you append the HTML back in place.

I tried putting it in update, but then width and height just return undefined @Leonidas. What other way is there to do the needful?

[Leonidas]

Never attach event handlers in your update method! That means you will be attaching a new one per frame resulting in thousand callbacks quickly.

What you need to do is when you click back from the room screen, and you attach your menu html in place, to rerun your jQuery click handlers.

[DevilZ]

@Leonidas

to rerun your jQuery click handlers.

Sorry, not great in frontend, how can I rerun the click handlers? The same issue also happens on the YUI code below @Leonidas.

[Leonidas]

When you click on this button:

In your code fire a Playcanvas event:

this.app.fire('backTo:menu');

And in your ui.js script add an event handler that runs your Jquery click handlers:

this.app.on('backTo:menu', function(){
   // attach jQuery event handlers
});

[DevilZ]

Will the same work for my YUI code @Leonidas?

[DevilZ]

Worked along with a bit of localStorage code I developed. Thanks @Leonidas.