Problem with toooltip and live event

Problem with toooltip and live event

Hi, I have the following table:

  
  1. <table id="mercancia_list" class="tablesorter"> 
  2.             <thead> 
  3.                 ... 
  4.             </thead> 
  5.             <tbody> 
  6.               <tr> 
  7.         ... 
  8.                 <td class="tableButton"><img id="preview_<?=$arrMercancia[$i]['id_mercancia']?>" class="preview_boton_mercancia" src="img/buttons/camera.png" /></td> 
  9.                 ...     
  10.               </tr> 
  11.                 <div id="img_<?=$arrMercancia[$i]['id_mercancia']?>" class="demotip"><img width="90" height="110" src="<?=$arrMercancia[$i]['foto_mercancia']?>"  /></div>    
  12.             </tbody>   
  13. </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):

   
  1. $('.preview_boton_mercancia').live('mouseover', function() { 
  2.    var id = $(this).attr("id").split("_"); 
  3.    var id_mercancia = id[1]; 
  4.    $('#preview_'+id_mercancia).tooltip({ 
  5.     tip: '#img_'+id_mercancia, 
  6.     effect: 'fade'
  7.    }); 
  8. }); 
  9.  
  10. $('.preview_boton_mercancia').live('mouseout', function() { 
  11.    var id = $(this).attr("id").split("_"); 
  12.    var id_mercancia = id[1]; 
  13.    var tooltip = $('#preview_'+id_mercancia).tooltip('#img_'+id_mercancia); 
  14.    tooltip.hide(); 
  15. });
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..