On iOS click on TableViewRow child is firing event on TableViewRow instead of its child. How to fix it?
I have a tableView, which has click event attached to it and is filled with rows:
var tableView = Ti.UI.createTableView({
populateData: populateData
});
tableView.addEventListener('click', tableViewClick);
Rows are simple and have views added:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
touchEnabled: false,
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);
Click action recognise which object fired the event:
var tableViewClick = function(e) {
var type = e.source.type;
var id = e.source.id;
var searchType = e.source.searchType;
var additionalText = e.source.additionalText;
alert(e.source.type);
switch(type) {
case 'delete':
deleteShopping(id,searchType);
break;
case 'edit':
editShopping(id, searchType, additionalText);
break;
}
};
It works perfectly on Android - if I click the imageView, than imageView is a source of an event (alert returns 'delete' and 'deleteShopping' function is invoked).
On iOS the source is always the row (instead of ImageView) and alert returns 'row' and no function is invoked.
Te reason was that parent container had 'touchEnabled' property set to false. If so than children will not fire event. On Android it will work. On iOS it won't. So it only takes to modify code like this:
var row = Ti.UI.createTableViewRow({
type: 'row',
height: 70,
className: 'notes',
});
var container = Ti.UI.createView({
left: 15,
width: Ti.UI.SIZE,
//touchEnabled: false,
//touchEnabled above has to be commented
});
var image = Ti.UI.createImageView({
image: '/images/usuwanie.png',
width: 35,
height: 35,
type: 'delete',
id: data.id,
searchType: data.type
});
container.add(image);
row.add(container);