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（）ed元素的子元素上，可能会出现bug。但是陌生人是，如果我对td.grid.current定位（）任何其他元素，那么bug就不会出现！它只发生在.move按钮！

在这里，我对appn提供了一些见解：

首先，我将解释我的应用程序的工作原理。   这是我想要帮助我的系统   计数小鼠脑切片上的细胞   用免疫酶法染色   反应

在屏幕上你有一个网格   （ td.grid ），你把它放在   细胞数量。这个网格本身   更大的桌子的一部分   （ table.grids ）包含很多   小网格。一旦有一个小网格   我想要切换到网格   附近使用方向按钮   （移动。例如）移开   来自当前的网格   （ 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/
.position(); - http://api.jquery.com/position/
.animate(); - http://api.jquery.com/animate/

jqueryUI position（）打破了事件！

1 个答案: