Appcelerator. Buttons in rows are unclickable - appcelerator-mobile

Question

Titanium SDK version: 1.6.2 (tried with 1.7 too)
iPhone SDK version: 4.2
I am developing an iPhone app and I am fetching data from my API and presenting it in a table. In this table I got a button on each row that should allow the user to add that person to his or her contacts. The only problem with the code (I think) is that only the last button responds when being clicked. Nothing happens when I click the other buttons.
This is my code: http://pastie.org/1932098
What is wrong?

Answer 1

You are adding the button.addEventListener outside of the for statement, and since you are overwriting the button var with each iteration, the eventListener only attaches to the last button created.
This probably isn't the best way to work this, but to fix your problem, move the button.addEventListener inside the for statement, and then check for a unique identifier in the object that gets sent to the event. Example:
for (x=0;x<5;x++) {
var button = Titanium.UI.createButton({
height:40,
width:100,
top:50*x,
id:x
});
var label = Titanium.UI.createLabel({
text:'LABEL '+x
});
button.add(label);
win1.add(button);
button.addEventListener('click', function(e){
Ti.API.info('Button clicked '+e.source.id);
});
}
The button.id property is just made up, but now you can see which button sends the event. You could also use title, or anything else that is unique.
Other options to look at are creating unique variable names for each button, but that's probably more work. Also, instead of working with putting a button in the table row, use a label or image, then listen for the event generated by the table or row.