jQueryUI position() breaks events

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

Sometimes, when a element is positioned 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:

<div  class="hidden" id="context">
    <div class="move up"><span></span></div>
    <div class="move down"><span></span></div>
    <div class="move left"><span></span></div>
    <div class="move right"><span></span></div>
</div>

her's the css:

    div.move {
    position: absolute;
    height: 40px;
    width: 40px;
    -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset, rgba(0, 0, 0, 0.4) 0px 3px 5px;
    border-radius: 20px;
}

div.move span{
    -webkit-transition: opacity 0.1s linear;
    height: 40px;
    width: 40px;
    position:absolute;
    -webkit-box-shadow: #333 0px -3px 1px inset, white 0px 2px 1px inset;
    border-radius: 20px;
}

div.move span:hover{
    opacity: 0; 
}

div.move.left span{
    background: url(images/left1.png) no-repeat;    
}

div.move.left{
    background: url(images/left-hover.png) no-repeat;
[...]

and finally the js:

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

Even if I use jQuery events it doesn't work!

Does anyone have any solution?

EDIT: 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:

<div class="" id="context">
    <div class="move up" style="top: -60px; left: 505px; "><span></span></div>
    <div class="move down" style="top: 780px; left: 505px; "><span></span></div>
    <div class="move left" style="top: 360px; left: -20px; "><span></span></div>
    <div class="move right" style="top: 360px; left: 1069px; "><span></span></div>
    <table class="grids" style="position: relative; top: -618px; left: -539px; ">
        <tbody>
            <tr class="gridsRow">
                <td class="grid current">
                    <div class="id">0</div>
                    <div class="gridTotal&q开发者_运维百科uot;></div>
                    <div class="close"><span class="hover"></span></div>
                    <table>
                        <tbody>
                            <tr class="cellsRow">
                                <td class="cell current">
                                    <div class="id">0</div>
                                    <label>0</label>
                                </td>
                                [...]
                            
</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:

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

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 appn:

First I'll explain how my app works. It's a system I thought of to help me counting cells 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 small 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 he 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.

---

If you are trying to move around the div, use
$('div.move.left').css(); or $('div.move.left').animate();

.position() doesn't take any arguments.

Documentation:
.css(); - http://api.jquery.com/css/
.position(); - http://api.jquery.com/position/
.animate(); - http://api.jquery.com/animate/