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

之前运行代码

以下演示

中的一切正常

DEMO

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

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

详细了解Javascript self executing Anonymous function

Javascript self executing function "is not a function"

或

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");
});

自定义对象内的范围问题

3 个答案: