Когда динамически созданные объекты вставляются в DOM?

Question

У меня есть следующий код:

$(function () {
    var html = $('<div></div>');

    html.load('preview.html', function (responseText, textStatus, XMLHttpRequest) {
        $('#some_id_in_loaded_html')...
    }

    html.dialog();
}

Однако в IE7 селектор jQuery в функции обратного вызова завершается ошибкой, поскольку не может найти указанный идентификатор.Он отлично работает в Firefox.

Почему это происходит и каково правильное поведение (в соответствии со стандартами)?

Обратите внимание, что эту проблему легко исправить с помощью $('#some_id_in_loaded_html',this)

Answer 1

$("#foo") использует document в качестве контекста для поиска, и поэтому ничего не возвращает, потому что html div (и все его потомки, включая элемент с этим идентификатором) не являются частью DOM.

Вы должны сначала вставить html div в DOM, например html.appendTo("body");. Все потомки автоматически попадают в DOM, и $("#foo") работает.

Тестовый пример с использованием фактической функции поиска (querySelectorAll): http://jsfiddle.net/k7muh/.

var div = $("<div><div id='foo'></div></div>");

// tests to expect div#foo

console.log(document.querySelectorAll("#foo"));   // searches in document and
                                                  // does not find the element

console.log(div.get(0).querySelectorAll("#foo")); // searches in the (detached)
                                                  // div and finds the element

Answer 2

В этом случае, я думаю, он вставляется при вызове .dialog(), который, вероятно, будет выполняться до вашего асинхронного обратного вызова (но, возможно, позже в некоторых случаях?).