javascript - 对象文字:无法访问动态DOM

我还没有完全掌握Javascript中的Object Literal的基础知识，所以这是我的问题的一个示例。我创建了一个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)
    }
}

我不明白的是：


b.test1('Hello')将相应地写入HTML，因为初始HTML文件包含#test。这是完全可以理解的。
b.test2('Hello')不会写，因为我不知道为什么，这是我需要解释的地方。


这是为您提供方便的小提琴：http://jsfiddle.net/tfYGR/2/

最佳答案

因为在没有创建ID为dynamic: $('#foo')的元素时在脚本执行开始时对表达式foo进行了评估，所以$('#foo')将返回一个空的jQuery对象。

仅在调用#foo方法时创建test1元素。

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

dynamic: '#foo'

然后

$(a.dynamic).html(m)

演示：Fiddle

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