Ошибка при вызове метода

175

16 августа 2018, 03:40

При вызове метода this.bindEvent(); возникает ошибка:

Uncaught TypeError: this.button.on is not a function

На 15 строке, буду признателен за помощь если укажите на мою ошибку

js:
(function() {
    "use strict"
    let List = {
        init: function() {
            this.casheDom();
            this.bindEvent();
        },
        casheDom: function() {
            this.input = document.querySelector(".js-input");
            this.button = document.querySelector(".js-btn-add");
        },
        bindEvent: function() {
            this.button.on("click", this.addItem.bind(this));
        },
        addItem: function() {
            console.log("click test");
        }
    };
    List.init();
})();
<div class="list">
        <input type="text" class="js-input">
        <button class="js-btn-add">add</button>
        <div class="js-list-view"></div>
    </div>
html:
<div class="list">
        <input type="text" class="js-input">
        <button class="js-btn-add">add</button>
        <div class="js-list-view"></div>
    </div>

Answer 1

У DOM-элементов нет метода on, видимо, Вы думали про jQuery.

this.button.addEventListener("click", this.addItem.bind(this));
window.addEventListener("load", function(){
  List.init();
});

(function() { 
  "use strict" 
  let List = { 
    init: function() { 
      this.casheDom(); 
      this.bindEvent(); 
    }, 
    casheDom: function() { 
      this.input = document.querySelector(".js-input"); 
      this.button = document.querySelector(".js-btn-add"); 
    }, 
    bindEvent: function() { 
      this.button.addEventListener("click", this.addItem.bind(this)); 
    }, 
    addItem: function() { 
      console.log("click test: ", this.input.value); 
    } 
  }; 
 
  window.addEventListener("load", function(){ 
    List.init(); 
  }); 
})();

<div class="list"> 
  <input type="text" class="js-input" value="test"> 
  <button class="js-btn-add"> add </button> 
  <div class="js-list-view"> 
  </div> 
</div>