加载后Div位置为0

时间:2013-05-28 15:13:03

标签: jquery html

加载页面后,div的位置为0,0 但它位置正确。如何在一开始就获得正确的位置? 我向JFiddle做了一个例子来说明问题。单击按钮后,位置值正确。

<div data-role="page" id="homepage">

    <div data-role="header">
            <h1>Home</h1>

    </div><!-- /header -->

    <div data-role="content" id="homecontent">     
<p><a href="#page1">Page1</a></p>        
    </div><!-- /content -->

    <div data-role="footer">
            <h4>&nbsp;</h4>
    </div><!-- /footer -->

</div><!-- /page -->

<div data-role="page" id="page1">

    <div data-role="header">
            <h1>Page1</h1>
    </div><!-- /header -->

    <div data-role="content" id="page1content">      

    </div><!-- /content -->

    <div data-role="footer">
            <h4>&nbsp;</h4>
    </div><!-- /footer -->

</div><!-- /page -->

====

jQuery(document).ready(function(e) {
    initThis();
});    


function initThis() {

    $('#page1content').append('<div id="isodivi"></div>').trigger("create");
    $('#isodivi').height(100);
    $('#isodivi').width(600);
    $('#isodivi').css( "background-color", "lightgreen" );
    var test = $('#isodivi').position().left +" "+ $('#isodivi').position().top;
    $('#isodivi').html(test);
    $('#isodivi').append('<a href="#" data-role="button" id="button1">Click</a>').trigger("create");
}    

$('#button1').click(function() {
var test = $('#isodivi').position().left +" "+ $('#isodivi').position().top;
$('#isodivi').html(test);        
});

1 个答案:

答案 0 :(得分:0)

这是一个工作版本:

http://jsfiddle.net/hA3Uz/1/

问题在于,在您未经编辑的代码中,当{div}不存在时,div的位置会被放入test,请尝试添加:

alert(test);

在您的initThis()函数中(在您给test赋值之后),您希望能理解我的意思。