Table Row lost click event after adding a button on it on andriod

Hi all First I must clarify that the exact code is work fine on IOS, which I've a table with a row, the row has a click event. it's fine at this point, but once I add a button on it, the row will lost it's click event, meaning that the click event will stop working, but it's work perfectly on IOS. it this some kind of bug?, I find that thing alway work fine on IOS, but suck on andriod. like this one TableViewRow Title not showing in Andriod

here is the code

var tableView = Titanium.UI.createTableView(); 
 tableView.addEventListener("click",function(e){ }); 
 
  var btnSw = Titanium.UI.createButton({        
   right:0,
   height: 50,
   width: 50,          
   image: '/images/format_list-48.png',
   style:'none',
   backgroundColor: '#00000000',//white color with 100% transparency(first 2 hex)
   sw:true,    
});
 
btnSw.addEventListener('click', function(e) {
 alert('Button');
})
 
var row=Ti.UI.createTableViewRow({
   height: 60,
   className: 'row'
  });   
 
row.addEventListener('click', function(e) {
 alert('ROW);
})
 
any idea ?

Try putting your event listener on the TableView, not the row.

A couple other items:

Don't use trailing commas in your object initializers:

var btnSw = Titanium.UI.createButton({        
   right:0,
...
   sw:true,    // you don't want a comma here
});

You have a syntax error in your click listener:

row.addEventListener('click', function(e) {
 alert('ROW);  // missing closing single quote
})

Hi Jason,

Well it don't change a bit, I still got no click event on the row nor the table, now i'm convinced this is bug, since it work on IOS, this is just a simple thing, not a platform specific, and they manage to screw it up, not just one but so many, now I've to work around it AGAIN, and i'm tire of doing so.

This is strange -- I was able to replicate your problem on android. I'll file a bug report with Appcelerator.

In the meantime, here's a workaround. Define a view that fills each row. Add your button to that view:

var win = Ti.UI.createWindow({
    backgroundColor : '#00ffff'
});
 
var tableView = Titanium.UI.createTableView(); 
tableView.addEventListener("click",function(e){ }); 
 
var row = Ti.UI.createTableViewRow({
    height: 60,
    className: 'row'
});
 
var v = Ti.UI.createView ({
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
});
 
row.add (v);
 
var btnSw = Titanium.UI.createButton({        
    right:0,
    height: 50,
    width: 50,          
    title: 'foo',
    sw:true    
});
 
btnSw.addEventListener('click', function(e) {
    alert('Button');
})
 
v.add (btnSw);
 
tableView.addEventListener('click', function(e) {
   alert('got click');
});
 
tableView.setData ([row]);
 
win.add (tableView);
 
win.open ();

Please note that the following code work perfectly fine on IOS, and totally suck on Andriod

bug 1. So I've a table with 2 table view selection, each selection contain some row, in each row there's a label and right image, what I want to do is, when the user click on the image, the image will change to another one, and when he click on the row it will change back. and I got 2 problem on it.

problem 1: if I keep click on the same row right image, another row right image will change too (usually on other selection).

problem 2: sometime when click on the row, the image doesn't change back, or it change on a wrong row image.

it just not working correctly

var win1=Titanium.UI.createWindow({
 title:'Tab 1',
 backgroundColor:'#fff'
});
 
var tableView=Titanium.UI.createTableView();
tableView.addEventListener("click", function(e) {
 if (e.source.sw) {
  e.row.children[1].image='/KS_nav_views.png'
  alert('image');
 }
 else {
  e.row.children[1].image='/KS_nav_ui.png'
  alert('row');
 }
 tableView.setData(tableView.getData());
});
if (Ti.Platform.osname==='iphone')
 tableView.style=Ti.UI.iPhone.TableViewStyle.GROUPED;
 
 
var tvs=[];
//------------------------------- group
tvs[0]=Ti.UI.createTableViewSection({
 headerTitle:'Groups'
});
//------------------------------- profile
tvs[1]=Ti.UI.createTableViewSection({
 headerTitle:'Profiles'
});
for ( i=0;i<2;i++) 
{
 for ( j=0;j<3;j++) 
 {
  var label=Ti.UI.createLabel({
   left:8,
   text:"Label "+j
  });
 
  var imgSw=Ti.UI.createImageView({
   right:2,
   height:48,
   width:48,
   image:'/KS_nav_ui.png',
   sw:true
  });
 
  var row=Ti.UI.createTableViewRow({
   height:48,
   //title:"Row "+j, 
 
   className:'row'
  });
  row.add(label);
  row.add(imgSw);
  tvs[i].add(row);
 
 }
}
 
tableView.setData(tvs);
win1.add(tableView);

bug 2. when you click on the row (the empty space), the row will flash(change it background color for a very short time) that fine, but if you click on the label (on the letter), it doesn't has this flash effect.

you may said, why don't you use the row build in Title and RightImage properties, yes I could, by using the title property instead of label, I can work round bug 2, but the row right image property doesn't give you click event(I've no idea when the user click on it), so I still need to add an image view on it. and that come another bug

bug 3. so now I'm using the row title property, and add an image view as the right image, so that I can have the right image click event, but by adding this image, the row title will disappear, and that really suck! this bug I've report in here, and someone tell me that once I've add the image view the title will ignore, I means WHAT! REALLY! that even sucker

var win1=Titanium.UI.createWindow({
 title:'Tab 1',
 backgroundColor:'#fff'
});
 
var tab1=Titanium.UI.createTab({
 icon:'KS_nav_views.png',
 title:'Tab 1',
 window:win1
});
 
var tableView=Titanium.UI.createTableView();
tableView.addEventListener("click", function(e) {
 if (e.source.sw) {
  e.row.children[1].image='/KS_nav_views.png'
  alert('image');
 }
 else {
  e.row.children[1].image='/KS_nav_ui.png'
  alert('row');
 }
 tableView.setData(tableView.getData());
});
if (Ti.Platform.osname==='iphone')
 tableView.style=Ti.UI.iPhone.TableViewStyle.GROUPED;
 
 
var tvs=[];
//------------------------------- group
tvs[0]=Ti.UI.createTableViewSection({
 headerTitle:'Groups'
});
//------------------------------- profile
tvs[1]=Ti.UI.createTableViewSection({
 headerTitle:'Profiles'
});
for ( i=0;i<2;i++) 
{
 for ( j=0;j<3;j++) 
 {
  // var label=Ti.UI.createLabel({
   // left:8,
   // text:"Label "+j
  // });
 
  var imgSw=Ti.UI.createImageView({
   right:2,
   height:48,
   width:48,
   image:'/KS_nav_ui.png',
   sw:true
  });
 
  var row=Ti.UI.createTableViewRow({
   height:48,
   title:"Row "+j,      
   className:'row'
  });
 
  //row.add(label);
  row.add(imgSw);
  tvs[i].add(row);  
 }
}
 
tableView.setData(tvs);
win1.add(tableView);

I MUST SAID IT AGAIN this code work perfectly find on IOS, and Jason I don't know if you're one of the appcelerator team, but I've spend a lot to time to doing this, please make it worth.