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())();これは、関数をすぐに実行する関数を使用しているため、関数の前にコードを実行している可能性があるためです。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 を検索する準備が整う前です。

これを示すフィドルは次のとおりです<head>。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 に答える