Geek asks and answers

Chrome DOM not updating for jQuery append / fadeIn

After getting a new record from the server, I use the AJAX success callback from jQuery 1.7.2 to add a new record to the list and put it out.

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');
}

I tested this in the following browsers:

  • IE 8
  • IE 9
  • Safari 5.1.7
  • Firefox 14.0.1
  • Chrome 21.0.1180.79
  • Opera 11.64

It works in all of the above browsers sequentially, with the exception of Chrome. It sometimes works in Chrome.

In the event of a crash in Chrome, if I click the Inspect Element or browse the Elements tab in the Developer Tools or click on the DOM element that is printed in the Javascript Console with console.log(record), it forces the new pop entry to be visible.

, DOM , . , Chrome DOM. .

fadeIn show fadeTo .

" " . - <div> <div> s, , , HTML.

?

+5
1

:

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

0

More articles:


All Articles