javascript question - using for loop for dynamic event listeners creates multiple event listeners

[abcde]

Thanks for any advice and insight

I get multiple event listeners when I use the for loop to dynamic node ids.
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 - multiple event listeners for each node id

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 and only 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

[DexterHugo]

You know there is a joke in here since you posted the same question twice ... but that aside.

I'm sort of surprised you get any listeners, so take this advice with a grain of salt because maybe I'm missing something just looking at the code.

But when you do this:

Code: Select all

   	let room_id = "#bottom_card" + this.num_players.toString();
	dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );		

You're not passing the variable room_id to $() - you're passing a string literal 'room_id'. I think you would want it to be just this without the quote's:

Code: Select all

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

Also - in your hard coded sample at the bottom, you didn't include the # sign, but you did in your loop when setting room_id. I think you don't need it in this case for $(). I think that's more for dojo.query('#bottom_card1') - but $() just takes the id element directly.

So final solution would be:

Code: Select all

   	var room_id = "bottom_card" + this.num_players.toString();
	dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );		

Or better yet - why store a variable at all?

Code: Select all

	dojo.connect( $("bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );		

[abcde]

You know there is a joke in here since you posted the same question twice ... but that aside.

I'm sort of surprised you get any listeners, so take this advice with a grain of salt because maybe I'm missing something just looking at the code.

But when you do this:

Code: Select all

   	let room_id = "#bottom_card" + this.num_players.toString();
	dojo.connect( $('room_id'), 'onclick', this, 'onRoomSelect' );		

You're not passing the variable room_id to $() - you're passing a string literal 'room_id'. I think you would want it to be just this without the quote's:

Code: Select all

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

Also - in your hard coded sample at the bottom, you didn't include the # sign, but you did in your loop when setting room_id. I think you don't need it in this case for $(). I think that's more for dojo.query('#bottom_card1') - but $() just takes the id element directly.

So final solution would be:

Code: Select all

   	var room_id = "bottom_card" + this.num_players.toString();
	dojo.connect( $(room_id), 'onclick', this, 'onRoomSelect' );		

Or better yet - why store a variable at all?

Code: Select all

	dojo.connect( $("bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );		

[/quote]

Thanks for helping me fix the problem, DexterHugo

I accidentally created to posts of the same thing. LOL

you are correct, I didn't include the # sign, and it was the # in "dojo.connect( $("#bottom_card" + this.num_players.toString()), 'onclick', this, 'onRoomSelect' );" that was the problem.



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

Thanks !