Chrome DOM không cập nhật cho jQuery bổ sung/fadeIn

Question

Sau khi lấy một kỷ lục mới từ máy chủ, tôi sử dụng thành công callback AJAX từ jQuery 1.7.2 để thêm một kỷ lục mới vào danh sách và mờ dần nó trong.

function onSuccess (data, status, xhr) { 
    var record = $(template_html); 

    // populate `record` with `data` values. 

    body.append(record); // body is a jQuery object from closure scope 
    record.fadeIn('fast'); 
} 

tôi đã thử nghiệm này trong các trình duyệt sau:

• IE 8
• IE 9
• Safari 5.1.7
• cháy fox 14.0.1
• Chrome 21.0.1180.79
• Opera 11,64

Nó hoạt động trong tất cả các trình duyệt trên một cách nhất quán, trừ dành cho Chrome. Đôi khi nó hoạt động trong Chrome.

Khi không thành công trong Chrome, nếu tôi nhấp vào "Kiểm tra phần tử" hoặc xem tab Yếu tố trên Công cụ nhà phát triển hoặc nhấp vào phần tử DOM được in trên Bảng điều khiển Javascript bằng cách sử dụng console.log(record), nó làm cho bản ghi mới bật vào tầm nhìn.

Tôi biết rằng phần tử DOM đang được tạo, được điền và thêm chính xác. Vấn đề là đôi khi Chrome từ chối trả lại DOM. Đôi khi.

Tôi đã thử thay thế fadeIn bằng show hoặc fadeTo mà không thay đổi.

Không có câu trả lời nào trong "Câu hỏi tương tự" đã hoạt động đối với tôi. Đánh dấu cho bản ghi chỉ là <div> s trong <div> s và tôi đã xác thực trang trước và sau khi thêm bản ghi mới để xem liệu HTML không hợp lệ có thể là vấn đề hay không.

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

Answer 1

thử điều này:

$(document).ready(function() { 
    var body = document.body; 
    $(body).append(function() { 
     return $('<div>').addClass('Appended').html('Test Div </br> :)'); 
    }); 

    setTimeout(function() { 
     $('.Appended').fadeIn('fast'); 

     // i'm used timeout to see the effect 
    }, 1500); 
}); 

bạn có thể kiểm tra nó bằng cách fiddle này link