jQueryUI position() 中断事件

Question

我不知道是否是我的问题，但我在使用 jQueryui 的 position() 实用程序时遇到了一些问题。

有时，当使用 jQuery ui 定位元素时，其上的事件不再起作用！

这很奇怪，只发生在某些元素上，但我找不到共同点。

我有一些按钮，我想在悬停时更改背景：

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

她是 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;
[...]

最后是 js：

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

即使我使用 jQuery 事件，它也不起作用！

有人有解决办法吗？

编辑：也许我明白了，而且似乎是一个错误！

应用程序运行后，它会在 #context 容器中生成 html，为主表的每个 td 创建主表和小表：

<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"></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>

所有具有内联样式的位置的元素都已由 处理jQuery ui 的position() 函数。主表table.grids是由这段代码移动的：

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

好吧，问题出在这段代码上。

如果我使用 position() 移动 table.grids，.move 按钮上的事件处理将被禁用

如果我删除此代码，问题就会消失。 我认为这是一种错误。 我认为如果您将一个元素 position() 与另一个 position()ed 元素的子元素相对应，则可能会出现该错误。但奇怪的是，如果我 position() 任何其他元素针对 td.grid.current，错误就不会出现！它只发生在 .move 按钮上！

在这里我给出一些关于appn的见解：

首先，我将解释我的应用程序是如何工作的。 这是我想到的一个可以帮助我的系统 计算小鼠大脑切片上的细胞 免疫酶染色 反应。

屏幕上有一个网格 (td.grid)，您将 细胞数量。这个网格本身就是 更大桌子的一部分 (table.grids) 包含许多 小网格。一旦有一个小网格 已满 我想切换到网格 使用方向按钮在附近 （例如 move.up）离开 从当前网格 (td.grid.current) 到下一个。

我使用 jQuery ui 位置来修复 td.grid.current 在他的中心 即使您调整页面大小，也可以通过修复 主表的位置 (table.grids) 有一定的偏移量 位于网格中心。然后我用了 position() 还可以修复按钮 相对于当前网格。

Answer 1

如果您尝试在 div 中移动，请使用
$('div.move.left').css(); 或 $('div.move.left').animate();

.position () 不接受任何参数。

文档：
.css(); - http://api.jquery.com/css/< /a>
.position(); - http://api.jquery.com/position/< /a>
.animate(); - http://api.jquery.com/animate/< /a>