0

我想我有一个范围可见性问题，我无法准确弄清楚：当我记录变量时，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')
});
})();
4

3 回答 3

2

发生这种情况是因为当您使用(function())();which 立即执行该函数时，它可能在dom is ready

在下面的演示中一切正常

演示

把你所有的代码放在里面document ready，或者至少调用initialize里面的方法，doc ready block比如

 $(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/

于 2012-06-04T13:17:21.283 回答
1

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

这里是小提琴演示这个： http: //jsfiddle.net/w7KaY/（JavaScript被放置在<head>，所以init（）很早就被调用）而在这里（http://jsfiddle.net/w7KaY/1/），调用to init() 被封装在 jQuery 的 DOM 就绪事件的事件处理程序中。

于 2012-06-04T13:20:49.493 回答
0

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

this.navbuttons.bind('click', function() {
   console.log("clicked");
});
于 2012-06-04T13:17:36.313 回答