jquery - 読み込み後、div 位置が 0 になる

Question

ページをロードした後、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);        
});