未定義のJavascriptエラーが発生しました。

Question

ボタンをクリックしようとするとこのエラーが発生する理由がわかりません。

Uncaught TypeError: Cannot read property 'on' of undefined

JSFiddle：https://jsfiddle.net/mm5crd3b/

おかげ

$(document).ready(function(){ 

(function() { 
    var itemTracker = { 
     // init 
     init: function() { 
      this.bindEvents(); 
     }, 

     // cacheDom 
     cacheDom: { 
      inputAdd: $('#inputAdd'), 
      submitAdd: $('#submitItem') 
     }, 

     // item 
     item: { 
      text: this.inputAdd.value, 
     }, 

     // Bind Events 
     bindEvents: function() { 
      this.submitAdd.on("click", addItem); 
     }, 

     // Add item 
     addItem: function() { 
      console.log("test"); 
     } 

     // Remove item 

     // Edit Item 

     // Complete Item 

     // Uncomplete Item 
    }; 

    itemTracker.init(); 

})(); 

}); 

Answer 1

あなたは間違った方法でプロパティにアクセスしている、あなたのコードを見ると、私はcacheDomを伝えることができ

bindEvents: function() { 
    this.cacheDom.submitAdd.on("click", addItem); 
}, 

がありますそれにプロパティとしてsubmitAddを保持するオブジェクトです。

また、

item: { 
text: this.inputAdd.value, 
}, 

コード習慣作業のこの部分は予想通り。問題を解決するためのゲッターとして書くことができます。

get itemText() { 
return this.cacheDom.inputAdd.value, 
}, 

Answer 2

あなたが直接cacheDomを使用してではなく、それらにアクセスしているとのaddItemはあなたのように、オブジェクトのインスタンスの一部であるので、あなたのbindEvents方法に若干の変更がsubmitAddがcacheDom・オブジェクトのキーである

bindEvents: function() { 
     this.cacheDom["submitAdd"].on("click", this.addItem); 
     }, 

ありますこれを使用してアクセスしてください。これを変更すると、エラーは消えてしまいます。

Answer 3

あなたのコードとは関係ありません。このバージョンのバグはjQuery/Sizzleです。ボタンをクリックする前にバグがあります。

例外ソースは、デフォルトドキュメントに対して初期化しようとしていますSizzleです。お返事、私は「これを使用 理由で

しかし、あなたのコードも間違っている:) 私はあなたがこのようになりたかったと思います（ここクリック作品のハンドラ）

$(document).ready(function() { 

(function() { 
    var itemTracker = { 
    // init 
    init: function() { 
     this.bindEvents(); 
    }, 

    // cacheDom 
    cacheDom: { 
     inputAdd: $('#inputAdd'), 
     submitAdd: $('#submitItem') 
    }, 

    // item 
    item: { 
     text: this.inputAdd.value, 
    }, 

    // Bind Events 
    bindEvents: function() { 
     this.cacheDom.submitAdd.on("click", this.addItem); 
    }, 

    // Add item 
    addItem: function() { 
     console.log("test"); 
    } 

    // Remove item 

    // Edit Item 

    // Complete Item 

    // Uncomplete Item 
    }; 

    itemTracker.init(); 

})(); 

});