Il codice non verrà eseguito in $ (document) .ready ma nella console per sviluppatori

Question

Ho un codice inserito in $(document).ready(function(){ /*code*/ }); e tutto funziona correttamente, ad eccezione di una riga. Il codice sopra funziona bene, il codice sotto funziona bene, non ricevo errori nella mia console.

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

Che non fa fuoco. Tuttavia, se lo incollo esattamente nella console degli sviluppatori e premi Invio dopo che la pagina è stata caricata, funziona. Tutti gli elementi esistono al caricamento della pagina (ovvero nessuno viene generato dinamicamente tramite javascript). Stesso risultato in chrome, firefox, IE.

Qualche idea?

modifica: dovrei aggiungere che il mio css è stato caricato prima del mio javascript e ho apportato altre modifiche correlate CSS in questo stesso file javascript che ha funzionato bene.

Inoltre, se console.log $ ('. Main-right.category'). Height() e $ ('. Footer'). Height() proprio sopra quella riga di codice, entrambi forniscono non- zero valori interi come mi aspetterei.

Answer 1

L'evento pronto quando il DOM è pronto a lavorare con. Si differenzia dall'evento load che si attiva quando tutte le risorse (css, javascript, immagini, ...) sono tutte caricate.

Immagino che quando esegui il codice, gli elementi che stai cercando di ottenere l'altezza abbiano già calcolato un'altezza, quindi sembra che non accada nulla.

Quando si esegue il codice nella console, tutto viene caricato in modo che il comportamento sia quello previsto.

Per eseguire il collegamento all'evento di caricamento, controllare il metodo .load().

Answer 2

Io di solito impostare l'altezza con:

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

Answer 3

$ (documento). Si attiva quando la struttura DOM è disponibile, in questo momento il rendering non è completamente utilizzato, quindi le dimensioni degli elementi potrebbero essere sconosciute e height() restituirà valori errati.

Utilizzare $(window).load().

Answer 4

È necessario utilizzare console per eseguire il debug dei selettori e visualizzare le altezze degli elementi;

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

});