javascript - Backbone.js 为什么 DOM 在渲染函数中不可用？

Question

在backbone的渲染函数中，

render: function() {
    this.$el.html('<div id="customID"></div>

    console.log($('#customID')[0]);
    setTimeout(function(){
        console.log($('#customID')[0]);
    }, 1);
}

第一个 console.log 返回“undefined”...

第二个返回一个 DOM 节点。

为什么在没有超时的情况下渲染函数中的 DOM 不可用？

Answer 1

那是因为元素还没有被添加到文档中。 DOM 可用，但元素不在其中。

setTimeout 调用使浏览器在它不再忙于运行代码时调用代码，这发生在渲染完成且元素已添加到文档时。

如果您在 jQuery 调用中使用元素作为范围，它会找到 div，即使它不在文档中:

console.log($('#customID', this.$el)[0]);

或:

console.log(this.$el.find('#customID')[0]);