El código no se ejecutará en $ (documento) .ready pero lo hará en la consola de desarrollador

Question

Tengo un código incluido en $(document).ready(function(){ /*code*/ });, y todo funciona bien, excepto una línea. El código de arriba funciona bien, el código debajo funciona bien, no recibo ningún error en mi consola.

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

Eso no dispara. Sin embargo, si pego eso exactamente en la consola de desarrollador y presiono enter después de que la página se cargó, funciona. Todos los elementos existen en la carga de la página (es decir, ninguno está creado dinámicamente a través de javascript). Mismo resultado en cromo, firefox, IE.

¿Alguna idea?

editar: Debo añadir que mi css está cargado antes de mi javascript, y he hecho otros ajustes relacionados con CSS en este mismo archivo de javascript que han funcionado bien.

Además, si console.log $ ('. Main-right.category'). Height() y $ ('. Footer'). Height() justo encima de esa línea de código, ambos dan no- valores enteros cero como yo esperaría.

Answer 1

Se desencadena el evento listos cuando el DOM está listo para trabajar. Difiere del evento de carga que se activa cuando todos los activos (css, javascript, imágenes, ...) están cargados.

Supongo que cuando se ejecuta el código, los elementos que intenta obtener la altura ya tienen una altura calculada, por lo que parece que no pasa nada.

Cuando ejecutó su código en la consola, todo está cargado, por lo que el comportamiento es el esperado.

Para enlazar al evento de carga, verifique el método .load().

Answer 2

lo general establecer la altura con:

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

Answer 3

$ (documento). Se dispara cuando la estructura DOM está disponible por completo, en este momento la representación usualmente no está terminada, por lo que las dimensiones de los elementos pueden ser desconocidas y height() devolverá valores incorrectos.

Use $(window).load() en su lugar.

Answer 4

Debe usar console para depurar los selectores y ver las alturas de los elementos;

$(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())); 

});