Будет ли этот код всегда работать?

Question

$('#container').append('<div id="theonly">tests</div>').find('#theonly');

и

$('#container').html('<div id="theonly">tests</div>').find('#theonly');

Меня беспокоит, что динамически генерируемые элементы не доступны сразу, я не прав или нет?

Если я не ошибаюсь, какое решение охватить все дела?

EDIT Может кто-нибудь придумать определенный и единый ответ?

Answer 1

В мире DOM любой, кто отвечает на этот вопрос "да", безумен.

Функция html(val) заменяет innerHTML напрямую, поэтому теоретически этот код должен работать всегда, так как #container фактически будет иметь новый html-код к тому времени, когда вы вызовете find()

Однако DOM известен тем, что ведет себя по-разному в разных браузерах. Итак, урок здесь заключается в тщательном тестировании.

EDIT : В ответ на «каково ваше решение?»

Как я уже говорил выше, вам следует тщательно проверить. Функция должна работать должным образом, но вы не можете быть уверены, не протестировав основные браузеры.

С учетом сказанного, если вы действительно хотите получить конкретное подтверждение того, что новый HTML готов для запросов, вы можете настроить опрос, который проверяет текущий html() на соответствие HTML, который вы хотите установить в первую очередь.

Примерно так:

(function ($) {
    $.fn.htmlX = function (html, callback) {
        var element = this;
        var poll = function () {
            if (element.html() === html) {
                callback();
            } else {
                setTimeout(poll, 100);
            }
        };

        element.html(html);
        poll();
    };

    $('#container').htmlX('<div id="theonly">tests</div>', function() { $('#container').find('#theonly').css('color', '#f00'); });
}(jQuery));