javascript question - for loop and event listeners

[abcde]

Thanks for any advice and insight

I get multiple event listeners when I add event listeners to dynamically created node ids with the for loop.
How would you add event listeners to dynamically created nodes using the for loop?
Why are multiple event listeners created for each node id when I use any for loop?

Here is my example code

Code: Select all

            for( var player_id in gamedatas.players ){
				this.num_players++;
				let room_id = "#bottom_card" + this.num_players.toString();
				dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );		
            }
 

I have tried using a forEach loop and had the same results

Code: Select all

           for( var player_id in gamedatas.players ){
				this.num_players++;
				let room_id = "#bottom_card" + this.num_players.toString();
				dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );	
				this.selectables.push(room_id);	
            }
            this.selectables.forEach( node_id => dojo.connect( $( node_id ), 'onclick', this, 'onRoomSelect' ));

manually listing each one works well though - I get 1 event listener for each node.

Code: Select all

			dojo.connect( $('bottom_card1'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card2'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card3'), 'onclick', this, 'onRoomSelect' );
			dojo.connect( $('bottom_card4'), 'onclick', this, 'onRoomSelect' );

Thanks

[robinzig]

Your working and non-working code snippets are not doing the same thing at all!

Where you have this:

dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );

I assume you mean:

dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

since room_id is a variable containing the HTML id (as a string) of the required element. As it is, you're attaching the listener - multiple times - to the same element, that whose id is literally 'room_id' (assuming such an element exists, which I find surprising but seems to be the case from your description of what is happening).

[abcde]

Your working and non-working code snippets are not doing the same thing at all!

Where you have this:

dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );

I assume you mean:

dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

since room_id is a variable containing the HTML id (as a string) of the required element. As it is, you're attaching the listener - multiple times - to the same element, that whose id is literally 'room_id' (assuming such an element exists, which I find surprising but seems to be the case from your description of what is happening).

Thanks for helping me fix the problem, robinzig

You are correct,
my code was dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

I was attaching the listener multiple time to the same element when I had room_id = "#bottom_card" + this.num_players.toString();
and then had dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );

when i removed the # from room_id, I no longer had multiple event listeners !

Thanks !