Using JQuery functions on HTML produced by JQuery?

Question

Hello all,

I have a HTML page that is generated by JavaScript (JQuery). It makes use of JQGrid. This is the source of the page.

I attempt to change one of the widths and check its width like so:

var width = window.screen.availWidth; //1280
$('#gbox_grid').css('width', width);
alert($('#gbox_grid').width()); //alerts a null

But the alert returns a null? The ID is correct and the element is there (via Firbug). I have done this inside document ready as well.

Thanks all for any help.

Answer 1

Based on your comment, yes, you need to run this after your AJAX call loads the element (in your success or complete callback), otherwise it won't be there for the selector to find.

So this:

$('#gbox_grid')

won't find any elements to run .css() on (or get .width() on either). Also, you can use .width(newWidth) to set the width as well, like this:

$('#gbox_grid').width(width);