jQuery Forum

Hi, I have the following table:

<table id="mercancia_list" class="tablesorter"> 
            <thead> 
                ... 
            </thead> 
            <tbody> 
              <tr> 
        ... 
                <td class="tableButton"><img id="preview_<?=$arrMercancia[$i]['id_mercancia']?>" class="preview_boton_mercancia" src="img/buttons/camera.png" /></td> 
                ...     
              </tr> 
                <div id="img_<?=$arrMercancia[$i]['id_mercancia']?>" class="demotip"><img width="90" height="110" src="<?=$arrMercancia[$i]['foto_mercancia']?>"  /></div>    
            </tbody>   
</table> 

I just left the relevant parts, its just a list of products I get from a DB, each one has and image (thats loaded on the <div>). I'd like to show on a tooltip eveytime the user hovers over the <img> element I placed on the table, heres the script to do that (I'm using the 'live' function because the user can add new products so I dynamically create a new <img> element):

$('.preview_boton_mercancia').live('mouseover', function() { 
   var id = $(this).attr("id").split("_"); 
   var id_mercancia = id[1]; 
   $('#preview_'+id_mercancia).tooltip({ 
    tip: '#img_'+id_mercancia, 
    effect: 'fade', 
   }); 
}); 
 
$('.preview_boton_mercancia').live('mouseout', function() { 
   var id = $(this).attr("id").split("_"); 
   var id_mercancia = id[1]; 
   var tooltip = $('#preview_'+id_mercancia).tooltip('#img_'+id_mercancia); 
   tooltip.hide(); 
});

This works "almost" as intended the problems are:
1) The tooltip doesn't work on the first hover but after the second time the user hovers the <img> element.
2) It doesn't work at all on dynamically created elements.

You can see an example here: http://sm-dev.webege.com/ (login: admin / pass:admin)

Go to Registro -> Mercancia and hover over the preview icon.

Is it something I'm doing wrong? Any help will be appreciated.

Thanks in advance!

PD: This is in FF and Safari, in IE and Opera it won't work at all..