1

我正在使用模块化模式来编写我的 JS 代码。我有一个引用我所有 dom 元素的对象。我已经为稍后在代码执行中添加的 div 放置了选择器。当我添加该 div 并使用存储在引用对象中的引用使用 jQuery.css 时，它不起作用。

NameSpace = {
    objects: {
        someButton: $('.someButton'),
        someDiv: $('.someDiv'),
        myDiv: $('.myDiv'), //This will be added later
        //Other references
        .
        .
    },

    bindHandlers: {
        NameSpace.objects.someButton.on('click', someEventHandler);
        //Other bindings
        .
        .
    },

    eventHandlers: {
        someEventHandler: function(e){
            var div = jQuery('<div class="myDiv"></div>');
            NameSpace.objects.someDiv.append(div);

            //Doesn't work! If I use jQuery('.myDiv'), then it works,
            //but kills my modular style
            NameSpace.objects.myDiv.css({ //some styles });
        },
        //Other event handlers
    }
}
//Other code

这种方法适用于页面中存在的对象，但不适用于我在上面添加的 div。

有什么帮助吗？

4

1 回答 1

3

Javascript是程序化的，这条线myDiv: $('.myDiv')只计算一次，而不是每次你调用它。

这意味着您的选择器$('.myDiv')在页面的开头填充。

要解决此问题，您必须使变量成为函数

objects: {
        someButton: $('.someButton'),
        someDiv: $('.someDiv'),
        myDiv: function(){ return $('.myDiv'); }, //This will be added later
        //Other references
        .
        .
    },

每次调用它时它都应该重新计算选择器。

让我知道这个技巧是否有效。

于 2013-01-17T08:37:10.690 回答