famo.us - Click on a Surface selects the wrong Surface -

famo.us - Click on a Surface selects the wrong Surface -

with loop create 10 different surfaces. clicking on 1 of them, want content of surface. s not working. instead content of lastly created surface (in case 9). have alter content of selected (clicked) surface , not content of lastly created?

here code:

class="lang-js prettyprint-override">for (f = 0; f < 10; f++) { var draggable = new draggable({ xrange: [0, 1000], yrange: [0, 1000] }); var surface = new surface({ size: [true, true], content: f, properties:{ fontsize:'16px', cursor: 'pointer', borderradius:'50px', backgroundcolor: '#c0c0c0', border:'solid' } }); surface.on("click",function(){alert(surface.content)}); surface.pipe(draggable); maincontext.add(draggable).add(surface); }

the right surface beingness selected. issue in reference of surface.content of click function. surface reference has been replaced each time until lastly surface remains. reference current surface clicked using this.content in function because this bound current clicked surface in click function.

example code here

class="lang-js prettyprint-override">for (f = 0; f < 10; f++) { var draggable = new draggable({ xrange: [0, 1000], yrange: [0, 1000] }); var surface = new surface({ size: [true, true], content: f, properties: { fontsize: '16px', cursor: 'pointer', borderradius: '50px', backgroundcolor: '#c0c0c0', border: 'solid' } }); surface.on("click", function () { alert(this.content) }); surface.pipe(draggable); maincontext.add(draggable).add(surface); }

famo.us surface