自定义对象内的范围问题

Question

我认为我有一个范围可见性问题，我无法确切找出：当我记录变量displayatonce我得到了正确的结果，但是当我尝试使用按钮时，却没有得到任何回报。 我也尝试记录this.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')
});
})();

Answer 1

之所以发生这种情况，是因为您在使用(function())(); 它会立即执行功能，可能dom is ready在dom is ready之前正在运行代码

在下面的演示中一切正常

演示

将您所有的代码放在document ready或者至少在doc ready block调用initialize方法，例如

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

在此处阅读有关Javascript self executing Anonymous function更多信息

JavaScript自我执行功能“不是功能”

要么

http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

Answer 2

您使用jQuery的时间过早，尤其是在准备好搜索DOM之前。

这是演示此内容的小提琴： http : //jsfiddle.net/w7KaY/ （JavaScript放置在<head> ，因此init（）相当早地被调用）而此处（ http://jsfiddle.net/w7KaY/1/ ） ，对init（）的调用封装在jQuery的DOM-ready事件的事件处理程序中。

Answer 3

确保DOM中存在html元素。 除了您必须使用bind方法绑定事件以外，脚本没有其他问题。

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