javascript - Code won't execute in $(document).ready but will in developer console - Stack Overflow

admin管理员组

文章数量:1330118

I have some code wrapped in $(document).ready(function(){ /*code*/ });, and all of it works fine, except for one line. The code above it works fine, the code below it works fine, I'm not getting any errors in my console.

$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );

That doesn't fire. However, if I paste that exactly in the developer console and press enter after the page has loaded, it works. All of the elements exist at page load (meaning none are built dynamically via javascript). Same result in chrome, firefox, IE.

Any ideas?

edit: I should add that my css is loaded before my javascript, and I've done other CSS related tweaks in this same javascript file that have worked fine.

Also, if I console.log $('.main-right.category').height() and $('.footer').height() right above that line of code, they both give non-zero integer values like I'd expect.

I have some code wrapped in $(document).ready(function(){ /*code*/ });, and all of it works fine, except for one line. The code above it works fine, the code below it works fine, I'm not getting any errors in my console.

$('.main-right.category').height( $('.footer').height() + $('.main-right.category').height() );

That doesn't fire. However, if I paste that exactly in the developer console and press enter after the page has loaded, it works. All of the elements exist at page load (meaning none are built dynamically via javascript). Same result in chrome, firefox, IE.

Any ideas?

edit: I should add that my css is loaded before my javascript, and I've done other CSS related tweaks in this same javascript file that have worked fine.

Also, if I console.log $('.main-right.category').height() and $('.footer').height() right above that line of code, they both give non-zero integer values like I'd expect.

• javascript
• jquery

Share Improve this question Follow edited Feb 21, 2012 at 20:19 LOLapalooza asked Feb 21, 2012 at 20:15 LOLapaloozaLOLapalooza 2,08233 gold badges1717 silver badges2222 bronze badges 3

• No errors in the console? Can you post a link to the page? – James Hill Commented Feb 21, 2012 at 20:19
• 1 Without the rest of the code, the only thing I can think of is that the DOM element that you are targeting has not been loaded in the DOM at the time this statement is executed. By the time you get to the console of course its there and this statement works. – Juan Ayala Commented Feb 21, 2012 at 20:19
• Sure it does nothing? Try fixing some humongous values on the sum of heights and try. – Alfabravo Commented Feb 21, 2012 at 20:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The ready event fires when the DOM is ready to work with. It differs from the load event which fires when all assets (css, javascript, images, ...) are all loaded.

I guess that when you code runs, the elements you're trying to get the height does have an height calculated already so it seems nothing happens.

When you executed your code in the console, everything is loaded so the behavior is the one expected.

To bind to the load event, check the method .load().

$(document).ready fires when the DOM-structure is full available, at this time the rendering ususally isn't finished, so the dimensions of the elements may be unknown and height() will return wrong values.

Use $(window).load() instead.

i usually set height with:

var height = $('.footer').height() + $('.main-right.category').height();
$('.main-right.category').css('height',height+'px');

You should use the console to debug the selectors and view the heights of the elements;

$(document).ready(function() {

  var $footer = $('.footer');
  var $category = ('.main-right.category');

  console.log($category, $footer);
  console.log($category.height(), $footer.height());
  console.log('New height =', ($category.height() + $footer.height()));

});

本文标签： javascriptCode won39t execute in (document)ready but will in developer consoleStack Overflow