jquery - 这种代码总是有效吗？

Question

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

和

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

我担心有时动态生成的元素无法立即可用，我是否错了？

如果我没记错的话，覆盖所有情况的解决方案是什么？

编辑 有人能给出一个明确统一的答案吗？

Answer 1

在 DOM 的世界里，任何用"is"回答这个问题的人都是疯子。

html(val) 函数直接替换 innerHTML，因此理论上这段代码应该始终有效，因为 #container 实际上会有调用 find()

时的新 html 代码

但是，DOM 因在不同浏览器上的行为不同而臭名昭著。所以这里的教训是彻底测试。

编辑: 回答“你的解决方案是什么？”

正如我上面所说，你应该彻底测试。该函数应该按预期工作，但如果不测试主要浏览器，您永远无法确定。

话虽如此，如果您确实想要具体确认新的 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));