未定義的Javascript錯誤點擊

不知道當我嘗試點擊按鈕時爲什麼會出現此錯誤。未定義的Javascript錯誤點擊

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(); 

})(); 

});

來源

2017-03-12 Joe Consterdine

您正在訪問的錯誤的方式的財產，

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

當看到你的代碼，我可以告訴cacheDom是將submitAdd作爲屬性的對象。

此外，

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

的這部分代碼預期不會工作。你可以把它寫成一個getter來解決你的問題。

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

來源

2017-03-12 10:28:54

嗨感謝您的回覆，我使用的原因「這一.inputAdd'而不是使用'cacheDom.inputAdd'是因爲在這個視頻中，他似乎是這樣做的？ https://www.youtube.com/watch?v=m-NYyst_tiY 我是否正在解釋他在做什麼？ –

@JoeConsterdine他所做的事情與你所做的完全不同。他的代碼也不符合你的要求。 –

有你bindEvents方法

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

submitAdd微小的變化在cacheDom對象的關鍵，所以你必須，而不是直接使用cacheDom訪問他們的addItem是對象實例的一部分，所以你可以使用它訪問它們。如果你改變這個錯誤將會消失。

來源

2017-03-12 10:33:23 forethought

乾杯兄弟..... –

它與您的代碼無關。這是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(); 

})(); 

});

來源

2017-03-12 10:41:32 bluehipy

未定義的Javascript錯誤點擊

回答

相關問題