自定义对象内的范围问题

Scope issue inside a custom object

本文关键字：范围 问题 对象 自定义      更新时间：2023-09-26

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

发生这种情况是因为当您使用立即执行函数的(function())();时，也许它会在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/

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

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

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

this.navbuttons.bind('click', function() {
   console.log("clicked");
});
相关文章：