javascript - 对象字面量 : Dynamic DOM not accessible

Question

我还没有完全掌握 Javascript 中对象文字的基础知识，所以这是我的问题的一个例子。我创建了一个 AJAX 函数 post()返回 <div id="foo"></div>里面<div id=test></div>模拟我的问题。

var a = {
    static: $('#test'),
    dynamic: $('#foo'),
    test: {
        load: function(){
            post().done(function(r){
                a.static.html(r.testing)
            })
         }
    }
}

var b = {
    test1: function(m){
        a.static.html(m)
    },
    test2: function(m){
        a.dynamic.html(m)
    }
}

我不明白的是:

1. b.test1('Hello')将相应地写入 HTML，因为初始 HTML 文件包含 #test 。这是完全可以理解的。

2. b.test2('Hello')不会写，因为我不知道为什么，这就是我需要一些解释的地方。

为了您的方便，这是 fiddle :http://jsfiddle.net/tfYGR/2/

Answer 1

因为当 id 为 foo 的元素未创建时，表达式 dynamic: $('#foo') 在脚本执行开始时被求值，因此 $('#foo') 将返回一个空的 jQuery 对象。

仅当调用 test1 方法时才会创建 #foo 元素。

一个可能的解决方案是将动态元素选择器存储在 a.dynamic 中，而不是像这样尝试存储 jQuery 对象

dynamic: '#foo'

然后

$(a.dynamic).html(m)

演示:Fiddle

在上述情况下，直到调用 test2 时才会评估选择器 #foo，此时 test1 已添加目标元素到dom