javascript - 使用 jQuery Mobile 时无法返回元素的 width()

Question

测试演示页面:http://jsfiddle.net/rCKzs/

<script type="text/javascript">
    $(document).ready(function() {  
        alert( $("#test").width() );          
    });
</script>

..

<div id="test">content</div>

如果我删除了 jQuery Mobile，那么它没问题，否则返回 0。

Answer 1

不要将 document.ready 与 jQM 一起使用:

• http://jquerymobile.com/demos/1.0/docs/api/events.html

Important: Use pageInit(), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

另外jQM只支持jQuery 1.6.4

我会像这样使用 live()

$('div').live('pageshow',function(event, ui) {
    alert($("#test").width());  
});

• http://jsfiddle.net/rCKzs/1/