Javascript 自定义对象内的作用域问题

我想我遇到了一个范围可见性问题，我无法准确地弄清楚：当我记录变量

displaytoce

时，我得到了正确的结果，但是当我尝试使用按钮时，我没有得到任何回报。我还尝试记录了

这个.navbuttons

，但我得到的只是一个空集。。。我真的不明白这个代码有什么问题

<!-- html code -->
<div id="nav">
<a href="#" data-dir="prev">Previous</a>
<a href="#" data-dir="next">Next</a>
</div>

/* Js Script with jQuery */
(function() {

var NewsNavigator = {

    init: function(config) {
        this.navbuttons = config.navbuttons;
        this.displayatonce = config.displayatonce;
        this.counter = 0;
        this.showNews();
        this.enableNav();

    },

    showNews: function() {
        console.log(this.displayatonce);
    },

    enableNav: function() {
                    console.log(this.navbuttons);
        this.navbuttons.on('click', function() {
            console.log("clicked");
        });
    }

};

NewsNavigator.init({
    displayatonce: 3,
    navbuttons: $('div#nav').find('a')
});
})();

/*带jQuery的Js脚本*/
（功能（）{
var NewsNavigator={
初始化：函数（配置）{
this.navbuttons=config.navbuttons；
this.displaytoce=config.displaytoce；
这个计数器=0；
这是showNews（）；
这个。enableNav（）；
},
showNews:function（）{
console.log（this.displaytoce）；
},
enableNav:function（）{
console.log（this.navbuttons）；
this.navbuttons.on（'click'，function（））{
控制台日志（“单击”）；
});
}
};
NewsNavigator.init({
地点:3,，
导航按钮：$（'div#nav'）。查找（'a'）
});
})();
这是因为当您使用
（function（））（）
立即执行函数，可能是在

在下面的演示中，一切正常


将所有代码放入
documentready
中，或者至少调用
docready块中的
initialize
方法

 $(function(){
    NewsNavigator.init({
        displayatonce: 3,
        navbuttons: $('div#nav').find('a')
    });
});

阅读更多关于Javascript自动执行匿名函数的信息


或

发生这种情况是因为当您使用
（function（））（）
立即执行函数，可能是在

在下面的演示中，一切正常


将所有代码放入
documentready
中，或者至少调用
docready块中的
initialize
方法

 $(function(){
    NewsNavigator.init({
        displayatonce: 3,
        navbuttons: $('div#nav').find('a')
    });
});

阅读更多关于Javascript自动执行匿名函数的信息


或

确保DOM中存在html元素。除了必须使用
bind
方法绑定到事件之外，我认为脚本没有任何问题

this.navbuttons.bind('click', function() {
   console.log("clicked");
});

确保DOM中存在html元素。除了必须使用
bind
方法绑定到事件之外，我认为脚本没有任何问题

this.navbuttons.bind('click', function() {
   console.log("clicked");
});

您使用jQuery太早了，特别是在DOM准备好进行搜索之前

这里是fiddle演示：（JavaScript放在
中，因此init（）很早就被调用）而在这里（），对init（）的调用被封装在jQuery的DOM就绪事件的事件处理程序中。
您使用jQuery太快了，特别是在DOM准备好被搜索之前

这里是fiddle演示：（JavaScript放在
中，因此init（）很早就被调用）而在这里（），对init（）的调用被封装在jQuery的DOM就绪事件的事件处理程序中。
如何调用
enableNav（）
？你从console.log（this.navbuttons）得到了什么-也许
[]
？@Niko是的，没错！我得到了
[]
作为回报。看起来jQuery选择器
div#nava
与任何DOM元素都不匹配，因此返回了一个空数组。您可能可以通过将对NewsNavigator.init（）的调用放入DOM就绪事件中来解决此问题：
$（function（）{NewsNavigator.init（…
@Niko，这在我看来有点奇怪，因为如果我从控制台键入准确的表达式，两个
a
元素将正确显示。@hourted85，它在控制台中工作，因为当您在控制台中运行它时，DOM已准备就绪，因此它可以正确找到元素。您如何调用
enableNav（）
？您从控制台.log（this.navbuttons）中得到什么；
-可能是
[]
？@Niko是的，准确地说！我得到了
[]
作为回报。看起来jQuery选择器
div#nava
与任何DOM元素都不匹配，因此返回了一个空数组。您可能可以通过调用NewsNavigator.init（）来解决这个问题进入DOM就绪事件：
$（function（）{NewsNavigator.init（…
@Niko，这在我看来有点奇怪，因为如果我从控制台键入准确的表达式，两个
a
元素会正确显示。@hourted85，它在控制台中工作，因为当你在控制台中运行它时，DOM已经准备好了，因此它可以正确地找到元素。显然，我有一个错误的想法，
（function（））（）；
等于
$（document）。ready（function（）{}）
，显然不是！现在它工作了！！显然我有一个错误的想法，
（function（））（）；
等于
$（document）。ready（function（）{}）
，显然不是！现在它工作了！！