Unable to refresh images inside a row

I'm learning about Titanium following "Building Mobile Applications with Titanium". I'm having problems trying to refresh images inside a row. This is my code:

var win = Titanium.UI.createWindow({
    backgroundColor: '#000',
    width:'100%',
    height:'100%'
});
 
var images = [
    'cuadro0.gif',
    'cuadro1.gif',
    'cuadro2.gif',
    'cuadro3.gif'
];
 
function createImageView(i){
    var image = Titanium.UI.createImageView({
        image: 'cuadro' + i % 4 + '.gif',
        width: 50,
        height: 50,
        current: i % 4,
        top:0,
        left:0
    });     
    image.addEventListener('click', function(e){
        e.source.current = (e.source.current + 1) % 4;
        e.source.image = 'cuadro' + e.source.current  + '.gif';     
    }); 
    return image;
}
 
var table = Titanium.UI.createTableView();
var data = [];
for(var i=0;i<=20;i++){
    var row = Titanium.UI.createTableViewRow({
        height:50
    });
    row.add(createImageView(i));
    data.push(row);     
}
table.data = data;
win.add(table);
win.open();

When I click on an image, it changes to the next one (works fine), but a second click has no effect. If I add images directly to the window (without table and rows) every click works as expected.

What I'm doing wrong? =(

Application type: Android Titanium SDK: 2.1.1.GA Platform & version: Android 2.2 Device: Android emulator Host Operating System: Ubuntu 12.04 kernel 3.2.0-27 64b Titanium Studio: build: 2.1.1.201207271312