jqueryUI position() breaks events!

jqueryUI position() breaks events!

Hi,
I don't know if its me but i'm having some problem with the position() utility from jqueryui.

Sometimes, when a element is positionated with jquery ui, the events on it don't work any more!

It's totally strange that happens only on certain elements but I can't find a common point.

I have some buttons on which I want to change the background on hover:

  1.     <div  class="hidden" id="context">
  2.         <div class="move up"><span></span></div>
  3.         <div class="move down"><span></span></div>
  4.         <div class="move left"><span></span></div>
  5.         <div class="move right"><span></span></div>
  6.     </div>

her's the css:

  2.         div.move {
  3.         position: absolute;
  4.         height: 40px;
  5.         width: 40px;
  6.         -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset, rgba(0, 0, 0, 0.4) 0px 3px 5px;
  7.         border-radius: 20px;
  8.     }
  9.     
  10.     div.move span{
  11.         -webkit-transition: opacity 0.1s linear;
  12.         height: 40px;
  13.         width: 40px;
  14.         position:absolute;
  15.         -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset;
  16.         border-radius: 20px;
  17.     }
  18.     
  19.     div.move span:hover{
  20.         opacity: 0; 
  21.     }
  22.     
  23.     div.move.left span{
  24.         background: url(images/left1.png) no-repeat;    
  25.     }
  26.     
  27.     div.move.left{
  28.         background: url(images/left-hover.png) no-repeat;
  29.     [...]



and finally the js:

  1.             $('div.move.left').position({
  2.                 of: $('td.grid.current'),
  3.                 my: 'center center',
  4.                 at: 'left center',
  5.                 offset: '-40px 0',
  6.                 collision:  'none'
  7.             });

Even if I use jquery events to add a class with "opacity:0" on hover it doesn't work! It doesn't take the event!

Does anyone have any solution?

UPGRADE: maybe i got it and seems to be a bug!!!

Once the app run it generates html in the #context container, creating main table and small tables for every td of the main one:

  1.     <div class="" id="context">
  2.         <div class="move up" style="top: -60px; left: 505px; "><span></span></div>
  3.         <div class="move down" style="top: 780px; left: 505px; "><span></span></div>
  4.         <div class="move left" style="top: 360px; left: -20px; "><span></span></div>
  5.         <div class="move right" style="top: 360px; left: 1069px; "><span></span></div>
  6.         <table class="grids" style="position: relative; top: -618px; left: -539px; ">
  7.             <tbody>
  8.                 <tr class="gridsRow">
  9.                     <td class="grid current">
  10.                         <div class="id">0</div>
  11.                         <div class="gridTotal"></div>
  12.                         <div class="close"><span class="hover"></span></div>
  13.                         <table>
  14.                             <tbody>
  15.                                 <tr class="cellsRow">
  16.                                     <td class="cell current">
  17.                                         <div class="id">0</div>
  18.                                         <label>0</label>
  19.                                     </td>
  20.                                     [...]
  21.                                 
  22.     </div>

All the elements that have positions styled inline have been processed by the position() function of jquery ui. The main table table.grids is moved by this code:

  1.         $('table.grids').position({
  2.             my: 'left top',
  3.             at: 'center center',
  4.             of: $('#context'),
  5.             offset: '-1064px -998px'
  6.         });

Ok, the problem is this piece of code.

 If i move table.grids using position() the events handling on the .move buttons is disabled

If I delete this code the problem disappear.
I think it's a sort of bug.
I thought that maybe the bug appear if you position() an element against a child of a another position()ed element. But the stranger is that if I position() any other element against td.grid.current the bug doesn't show up! it happens only with the .move buttons!

Here I give some insight about the app:


 First I'll explain how my app works. It's a system i thought of to help me counting neurons on mouse brain slices colored with immuno-enzymatic reaction.

 On the screen you have a grid ( td.grid) in which you put the number of cells. this grid is itself part of a bigger table ( table.grids) that contains many smaller grids. Once one small grid is full i want to switch to the grids nearby using direction buttons (. move.up for example) that move away from the current grid ( td.grid.current) to the next one.

 I used jquery ui position to fix the td.grid.current on the center of the page even if you resize it, by fixing the position of the main table (table.grids) with a certain offset to center on the grid. and then i used position() also to fix the buttons relatively to the current grid.