Mã sẽ không thực thi trong $ (tài liệu) .ready nhưng sẽ trong bảng điều khiển dành cho nhà phát triển

Question

Tôi có một số mã được bao bọc trong $(document).ready(function(){ /*code*/ }); và tất cả đều hoạt động tốt, ngoại trừ một dòng. Mã trên nó hoạt động tốt, mã bên dưới nó hoạt động tốt, tôi không nhận được bất kỳ lỗi nào trong bảng điều khiển của tôi.

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

Điều đó không kích hoạt. Tuy nhiên, nếu tôi dán chính xác trong bảng điều khiển dành cho nhà phát triển và nhấn enter sau khi trang đã tải, nó sẽ hoạt động. Tất cả các phần tử tồn tại khi tải trang (có nghĩa là không có phần tử nào được xây dựng động qua javascript). Cùng một kết quả trong chrome, firefox, IE.

Bất kỳ ý tưởng nào?

chỉnh sửa: Tôi nên thêm rằng css của tôi được tải trước javascript của tôi và tôi đã thực hiện các chỉnh sửa CSS khác có liên quan trong cùng một tệp javascript đã hoạt động tốt.

Ngoài ra, nếu tôi console.log $ ('. Main-right.category'). Height() và $ ('. Footer'). Height() ngay trên dòng mã đó, cả hai đều cho không không có giá trị số nguyên như tôi mong đợi.

Answer 1

Ngọn lửa kiện đã sẵn sàng khi DOM đã sẵn sàng để làm việc với. Nó khác với sự kiện tải cháy khi tất cả các tài sản (css, javascript, hình ảnh, ...) đều được tải.

Tôi đoán rằng khi bạn chạy mã, các yếu tố bạn đang cố gắng lấy chiều cao không có chiều cao được tính toán nên có vẻ như không có gì xảy ra.

Khi bạn thực thi mã của mình trong bảng điều khiển, mọi thứ đều được tải để hành vi được mong đợi.

Để liên kết với sự kiện tải, hãy kiểm tra phương thức .load().

Answer 2

i thường được thiết lập chiều cao với:

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

Answer 3

$ (tài liệu) .ready cháy khi cấu trúc DOM có sẵn, tại thời điểm này kết xuất không được hoàn thành, do đó kích thước của các phần tử có thể chưa biết và chiều cao() sẽ trả về giá trị sai.

Sử dụng $(window).load() để thay thế.

Answer 4

Bạn nên sử dụng console để gỡ lỗi bộ chọn và xem chiều cao của các phần tử;

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

});