削除機能は、基本的に私は私のアプリがイベントを結合、DOMをキャッシュすなわち分離のすべてを維持したいのですが、ジャバスクリプトなどには、HTML</p> <p>私が持っていない、ボタンが

Question

が存在する前に、私は前にこの問題を持っていた呼び出されます私のbindeventsメソッドで私は削除ボタンをクリックしてどこに問題を発行しますが、削除ボタンは一度だけ追加されています。

私はエラーが取得しています：私は、私は存在しない要素のDOMを探しています、私はどのようにそれがあるような構造を維持するだけで検索しないと思いますので

Uncaught TypeError: Cannot read property 'addEventListener' of null

をアイテムが追加されたら、削除ボタンのDOM？

JSが

(function() { 
    var toDo = { 
     data: [], 
     cacheDom: function() { 
      this.toDoApp = document.getElementById('to-do-app'); 
      this.toDoTemplate = document.getElementById('to-do-template'); 
      this.addToDo = document.getElementById('add-to-do'); 
      this.addToDoValue = document.getElementById('add-to-do-value'); 
      this.deleteToDo = document.querySelector('.to-do-delete'); 
     }, 
     load: function() { 
      this.toDoTemplate = Handlebars.compile(this.toDoTemplate.innerHTML); 
     }, 
     render: function() { 
      this.toDoApp.innerHTML = this.toDoTemplate(this.data); 
     }, 
     bindEvents: function() { 
      this.addToDo.addEventListener("click", this.add.bind(this)); 
      this.deleteToDo.addEventListener("click", this.delete.bind(this)); 
     }, 
     add: function(e) { 
      var toDoValue = this.addToDoValue.value; 
      if(toDoValue) { 
       var toDoObj = { 
        value: toDoValue, 
        id: Date.now() 
       } 
      this.data.push(toDoObj); 
      } 
      this.render(); 
     }, 
     delete: function() { 
      console.log("delete!"); 
     }, 
     init: function() { 
      this.cacheDom(); 
      this.bindEvents(); 
      this.load(); 
      this.render(); 
     } 
    } 

    toDo.init(); 
})(); 

Answer 1

最初に、あなただけのonloadイベント後の要素を取得しようとする場合があります。

window.addEventListener("DOMContentLoaded",toDo.init.bind(toDo)); 

そして、あなたはすべてのクリックのウィンドウで聞くことができ、その後、それらをフィルタリング：

window.addEventListener("click",function(evt){ 
var el = evt.target; 
do { 
    if(el.classList.contains("someclass")){ 
    somefunc.call(el); 
    } 
} while (el = el.parentElement); 
}); 

Answer 2

あなたはbind()は、それらが定義されているとき、その範囲にイベントハンドラ関数をする、いないとき番目べきですリスナーとして設定しています。

bindEvents: function() { 
    this.addToDo.addEventListener("click", this.add); 
    this.deleteToDo.addEventListener("click", this.delete); 
}, 
add: function() { 
    // ... 
}.bind(this), 
delete: function() { 
    // ... 
}.bind(this), 

Answer 3

私は（常にとにかくヌルになるだろう）初期化手順からdeletetodoキャッシングやイベントの割り当てを削除すると、ボタンが代わりに追加されたときにイベントをリッスンします。