Question

我正在使用模块化模式来编写我的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。

任何帮助？

Answer 1

Javascript是程序性的，此行myDiv: $('.myDiv')只计算一次，而不是每次调用它。

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

要解决此问题，您必须将变量设为函数

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

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

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

jQuery.css不适用于添加了append的元素？

1 个答案: