单击时未定义的 Javascript 错误答案

【问题标题】：Undefined Javascript Error On Click单击时未定义的 Javascript 错误
【发布时间】：2017-03-12 10:25:06
【问题描述】：

不知道为什么我尝试单击按钮时收到此错误。

未捕获的类型错误：无法读取未定义的“on”属性

谢谢

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

})();

});

【问题讨论】：

标签： javascript

【解决方案1】：

您以错误的方式访问该属性，

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

当看到您的代码时，我可以看出 cacheDom 是一个对象，其中包含 submitAdd 作为属性。

另外，

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

这部分代码不会按预期工作。你可以把它写成 getter 来解决你的问题。

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

【讨论】：

您好，感谢您的回复，我使用 'this.inputAdd' 而不是使用 'cacheDom.inputAdd' 的原因是因为在这个视频中他似乎这样做了？ youtube.com/watch?v=m-NYyst_tiY我是不是理解错了他在做什么？
@JoeConsterdine 他正在做的事情与你正在做的事情完全不同。他的代码也与你的不匹配。

【解决方案2】：

您的 bindEvents 方法有一些细微的变化

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

submitAdd 是 cacheDom 对象中的一个键，因此您可以使用 cacheDom 而不是直接访问它们，并且 addItem 是对象实例的一部分，因此您可以使用它访问它们。如果您更改此设置，错误将消失。

【讨论】：

【解决方案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();

})();

});

【讨论】：