Titanium - Click event on view is ignored - ios

Question

I'm working on Titanium and developing for iOS devices. In my application I have a tableview that is filled with sections with rows created by a function that uses the data received from a HTTPClientobject response. Each row has a view and inside the view there's a button and label.
The button has a click event which works fine. I added a click event to the view that stores the button, but when I click on the view, the event isn't fired, but if I click on the button, both the button's event and the view's event are fired. This is not how it is supposed to behave, since I want the view's event to do something completely different from the button's event.
Why isn't the view's click event being fired when I click on the view? Why does the event fires when I click on the button?
Here's how I create the rows:
function addToDo(title, priority){
var that = {};
var row = Ti.UI.createTableViewRow({height:80});
that.currentPriority = priority;
that.resolveColor = function(tmpPriority){
switch(tmpPriority){
case 0: backgroundColorPriority = "#da362a"; break;
case 1: backgroundColorPriority = "#da6c2a"; break;
case 2: backgroundColorPriority = "#da962a"; break;
case 3: backgroundColorPriority = "#dacb2a"; break;
}
return backgroundColorPriority;
}
var rowLayout = Ti.UI.createView({
backgroundColor : 'transparent'
});
var checkbox = Ti.UI.createButton({
top: 25,
left: 5,
width: 30,
height: 30,
borderColor: 'white',
borderWidth: 2,
borderRadius: 1,
backgroundColor: '#b1b1b1',
backgroundImage: 'NONE',
zIndex:10,
value: false //value is a custom property in this case here.
});
rowLayout.add(checkbox);
//Attach some simple on/off actions
checkbox.on = function(item) {
this.backgroundColor = '#62b425';
item.currentRow.backgroundColor = "#101010";
this.value = true;
};
checkbox.off = function(item) {
this.backgroundColor = '#b1b1b1';
item.currentRow.backgroundColor = item.resolveColor(item.currentPriority);
this.value = false;
};
checkbox.addEventListener('click', function(e) {
if(false == e.source.value) {
e.source.on(that);
} else {
e.source.off(that);
}
});
// Create a Label.
var todoTitleLabel = Ti.UI.createLabel({
text : title,
color : 'white',
font : {fontSize:11},
left : 40,
textAlign : 'center'
});
// Add to the parent view.
rowLayout.add(todoTitleLabel);
row.add(rowLayout);
rowLayout.addEventListener('click', function(e){
// Whatever I put here isn't executed when I click on the rowLayout, instead I have to click the button to fire this event, that shouldn't happen
});
var backgroundColorPriority = that.resolveColor(that.currentPriority);
row.backgroundColor = backgroundColorPriority
that.currentRow = row;
return that.currentRow;
}
This function is called in a HTTPClient onload:
var clientTask = Ti.Network.createHTTPClient({
onload : function(e){
var responseTask = JSON.parse(this.responseText);
var entriesTask = responseTask.tasks;
var todoSectionView = Ti.UI.createTableViewSection({
headerTitle : responseTask.name
});
data.push(todoSectionView);
for( var j=0; j < entriesTask.length; j++){
var tmpRow = addToDo(entriesTask[j].name, entriesTask[j].priority);
todoSectionView.add(tmpRow);
}
// add the data to the tableview
table.data=data;
self.updateLayout();
},
timeout : 60000
});

Answer 1

I'd probably test this by creating an event handler for the todoTitleLabel or giving it a background color that is different from the row to see if I'm able to click on the row itself. Maybe the objects on it are blocking it? Perhaps you can accomplish what you are trying to do by adding the click event to the label instead?

Answer 2

Don't add the eventlistener to the row, section or rowlayout. It will cause problems on iOS.
Instead, add the eventlistener to your table view, e.g.:
tableView.addEventListener('click', function(e){
var rowNumber = e.index;
alert(rowNumber);
});
The example will alert the number of the selected row.