How to dynamically remove imageViews stacked up on one another - uiimageview

Question

I have tried the following code, the task I am trying to do is to first populate the window with an image stack and then every time you click on one, it removes it one by one.
var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];
for (var i in colors) {
var image = Titanium.UI.createImageView({
backgroundColor : colors[i],
top : 50,
left : 30,
width : 200,
height : 200
});
$.win.add(image);
}
image.addEventListener('click', function(e) {
alert(e);
alert(JSON.stringify(e.source));
$.win.remove(image);
});
and then when they click on each image, it gets removed from the window - the next one is then shown.
The event listener works fine for the first image view, but then stops working with the underlying ones.
I know that this can easily be done with a scrollableView, but I would like to try and do this using an image View stack.
Cheers.

Answer 1

You have to put the event listener inside the loop !
var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];
for (var i in colors) {
var image = Titanium.UI.createImageView({
backgroundColor : colors[i],
top : 50,
left : 30,
width : 200,
height : 200
});
//this is what you should do
image.addEventListener('click', function(e) {
alert(e); alert(JSON.stringify(e.source)); $.win.remove(image);
});
$.win.add(image);
}

Answer 2

Try this:
var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];
function imageHandler(_imgObj,_win)
{
_imgObj.addEventListener('click', function(e) {
alert(e);
alert(JSON.stringify(e.source));
_win.remove(image);
});
}
for (var i in colors) {
var image = Titanium.UI.createImageView({
backgroundColor : colors[i],
top : 50,
left : 30,
width : 200,
height : 200
});
imageHandler(image,$.win);
$.win.add(image);
}
What this does is remove the handler separates the handler and gives you more control. Through each iteration in the for-loop, each image has it's own handler defined and this should work.