Proper Sprite Button Events management

[ccgbagnet]

I've just started learning pixi.js 2 days ago and I'm stuck with this.

I'm trying to register mouse button events on 3 different buttons which I generate this way.

function initializeButtons(bg: PIXI.Graphics) {
	let xPos = (canvasWidthHeight/2) - 130;
	for(let i = 0; i < 3; i++) {
		let temp = PIXI.Sprite.fromImage(BOX_SPRITES[0]);
		temp.scale.set(0.5);
		temp.anchor.set(0.5, 0.5);

		temp.position.x = xPos;
		temp.position.y = canvasWidthHeight / 2;

		temp.interactive = true;
		temp.buttonMode = true;

		temp.on('pointerdown', function() {onClick(i);} );


		rewardBoxes.push(temp);
		bg.addChild(temp);

		xPos += 120;
	}
}

However, everytime I try to click on any button, it's always the last button that gets clicked. What is the proper way to achieve this? Thank you!

[stealman]

Try to use something like this ..

 

function createClickListener(temp, i) {
      temp.pointerdown = function() {
        onClick(i);
      };
  }

 

Call this function in the body of your loop