Failed to return the width() of element when using jQuery Mobile

Question

Demo page for testing: http://jsfiddle.net/rCKzs/

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

..

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

If I remove the jQuery Mobile, then it is okay, otherwise it return 0.

Phill Pafford · Accepted Answer · 2012-01-07 15:51:33Z

2

Do not use document.ready with 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.

Also jQM only supports jQuery 1.6.4

I would use the live() like this

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

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

answered Jan 7, 2012 at 15:51

Phill Pafford

85.6k92 gold badges268 silver badges385 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ojen Over a year ago

For my specific issue when binding to pageinit my div still gave a height of 0, but binding to .live('pageshow',... (as suggested) worked great.

Collectives™ on Stack Overflow

Failed to return the width() of element when using jQuery Mobile

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related