代码之家 › 专栏 › 技术社区 › Cheung

jquery position()没有在$(document).ready()上运行?

jquery-ui jquery

Cheung · 技术社区 · 15 年前

我正在使用jqueryui位置实用程序,但我不知道为什么它不在$(document.ready()上运行, 如果我使用firebug并执行position();再次手动,它可以正常工作。

更新:我尝试的代码不适用于IE8,它适用于Firefox和Chrome。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
    <style type="text/css">
        #Parent
        {
             width: 300px; 
             background-color: #999; 
             border: 1px solid #aaa;
        }
        #Parent  tr  td 
        {
            width: 60px; 
            height: 60px;
             text-align: center; 
             border: 1px solid #aaa;
        }
        div.positionable
        {
            width: 60px;
            height: 60px;
            position: absolute;
            display: block;
            right: 0;
            bottom: 0;
            background-color: #bcd5e6;
            text-align: center;
        }
    </style>
    <script type="text/javascript">

        function position() {
            $("#BoxA").position({
                of: $("#CellA"),
                my: 'left top',
                at: 'left top',
                offset: '0 0'
            });
        }


        $(document).ready(function () {
            $(".positionable").css("opacity", 0.5);
            position();
        });
    </script>
    <title></title>
</head>
<body>
    <table id="Parent">
        <tr>
            <td id="CellA">A</td>
            <td id="CellB">B</td>
        </tr>
    </table>
    <div id="BoxA" class="positionable">
        <p>A(2)</p>
    </div>
    <div id="BoxB" class="positionable">
        <p>B(2)</p>
    </div>
</body>
</html>

2 回复 | 直到 13 年前

Cheung 15 年前

问题已经解决了,可能是IE或JQuery的bug,但很快,我就以一种肮脏的方式解决了, 我调用position()两次可以修复。

    $(document).ready(function () {
        position();
        position(); //YES, 2 times.
    });

Alex Moleiro 13 年前

而不是使用$(document).ready使用$(window).load 它们之间的细微差别实际上就是差别。你可以搜索depper信息,但你会解决你的问题。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前