Javascript MVC、addEventListener不能附加到dom元素

我有这些javascript文件。理解MVC如何与javascript一起工作，这是一个非常小的测试项目。当我尝试单击“删除Bloak”按钮时，除了最后一个按钮（id为100）外，什么也没有发生。其他按钮没有附加任何单击事件。为什么?

Controller.js

View.js

使现代化 事实证明，我完全错了，做了更多的研究，看起来使用innerHTML属性将导致所有子元素的破坏。不管怎样，提供的解决方案仍然有效，但事实证明我自己并不知道这一点

我的脑子在放屁 我应该意识到一开始我是错的，如果我是对的，那么你会有一个错误，说明你不能将事件侦听器附加到null或未定义，我犯了一个糟糕、愚蠢的错误

主意 在非常简要地查看了您的代码之后，我认为可以肯定地说，您的呈现函数有点错误，因为使用了innerHTML，它没有足够快地解析更新的HTML，事件侦听器无法正常工作

我自己进行了测试，刚刚完成了以下工作：

setTimeout(() => {
    var addBloakButton = document.getElementById('addBloakButton');
    var deleteBloakButton = document.getElementById(bloakDataObjectModel.id);
    addBloakButton.addEventListener('click', this.onAddBloak);
    deleteBloakButton.addEventListener('click', this.onDeleteBloak);
}, 10);

成功了。所以，如果你不想改变太多，你可以做我上面所做的，或者，你可以做一些类似的事情：

  var div = document.createElement("div");
  div.innerHTML = '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
  this.domElement.append(div);

  var addBloakButton = document.getElementById('addBloakButton');
  var deleteBloakButton = div.querySelector('input[id*="' + bloakDataObjectModel.id + '"]');
  addBloakButton.addEventListener('click', this.onAddBloak);
  deleteBloakButton.addEventListener('click', this.onDeleteBloak);

演示 //控制器。 var BloakController=函数BloakControllermodel，视图{ this.model=模型； this.view=视图； }; BloakController.prototype.init=函数init{ this.view.onAddBloak=this.addBloak.bindthis； this.view.onDeleteBloak=this.deleteBloak.bindthis； this.view.onGetAllBloaks=this.getAllBloaks.bindthis； }; BloakController.prototype.addBloak=函数addBloak{ //待办事项 }; BloakController.prototype.getAllBloaks=函数getAllBloaks{ this.model.getAllBloaksthis.getAllBloaksList.bindthis； }; BloakController.prototype.getAllBloaksList=函数GetAllBloakSlistInstallBloakSlist{ 对于变量i=0；i'+bloakDataObjectModel.body+'

'+bloakDataObjectModel.userId++bloakDataObjectModel.id+； } BloakView.prototype.dispatchEvents=函数{ var list=this.doElement.querySelectorAll.bloakContainer； var todo=this.onDeleteBloak； var addBloakButton=document.getElementById'addBloakButton'； addBloakButton.addEventListener'click'，this.onAddBloak； list.forEachfunctiondiv{ var deleteButton=div.querySelectorinput[type=button]； deleteButton.onclick=函数{ todothis.id； }; }; }; //应用程序。 var bloakModel=new BloakModelXMLHttpRequest； var targetElement=document.getElementById'bloaksContainer'； var bloakView=新的BloakViewtargetElement； var bloakController=新的BloakControllerbloakModel，bloakView； bloakController.init； bloakController.getAllBloaks； 添加 使现代化 事实证明，我完全错了，做了更多的研究，看起来使用innerHTML属性将导致所有子元素的破坏。不管怎样，提供的解决方案仍然有效，但事实证明我自己并不知道这一点

我的脑子在放屁 我应该意识到一开始我是错的，如果我是对的，那么你会有一个错误，说明你不能将事件侦听器附加到null或未定义，我犯了一个糟糕、愚蠢的错误

主意 在非常简要地查看了您的代码之后，我认为可以肯定地说，由于 要使用innerHTML，解析更新的HTML的速度不够快，事件侦听器无法正常工作

我自己进行了测试，刚刚完成了以下工作：

setTimeout(() => {
    var addBloakButton = document.getElementById('addBloakButton');
    var deleteBloakButton = document.getElementById(bloakDataObjectModel.id);
    addBloakButton.addEventListener('click', this.onAddBloak);
    deleteBloakButton.addEventListener('click', this.onDeleteBloak);
}, 10);

成功了。所以，如果你不想改变太多，你可以做我上面所做的，或者，你可以做一些类似的事情：

  var div = document.createElement("div");
  div.innerHTML = '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
  this.domElement.append(div);

  var addBloakButton = document.getElementById('addBloakButton');
  var deleteBloakButton = div.querySelector('input[id*="' + bloakDataObjectModel.id + '"]');
  addBloakButton.addEventListener('click', this.onAddBloak);
  deleteBloakButton.addEventListener('click', this.onDeleteBloak);

演示 //控制器。 var BloakController=函数BloakControllermodel，视图{ this.model=模型； this.view=视图； }; BloakController.prototype.init=函数init{ this.view.onAddBloak=this.addBloak.bindthis； this.view.onDeleteBloak=this.deleteBloak.bindthis； this.view.onGetAllBloaks=this.getAllBloaks.bindthis； }; BloakController.prototype.addBloak=函数addBloak{ //待办事项 }; BloakController.prototype.getAllBloaks=函数getAllBloaks{ this.model.getAllBloaksthis.getAllBloaksList.bindthis； }; BloakController.prototype.getAllBloaksList=函数GetAllBloakSlistInstallBloakSlist{ 对于变量i=0；i'+bloakDataObjectModel.body+'

'+bloakDataObjectModel.userId++bloakDataObjectModel.id+； } BloakView.prototype.dispatchEvents=函数{ var list=this.doElement.querySelectorAll.bloakContainer； var todo=this.onDeleteBloak； var addBloakButton=document.getElementById'addBloakButton'； addBloakButton.addEventListener'click'，this.onAddBloak； list.forEachfunctiondiv{ var deleteButton=div.querySelectorinput[type=button]； deleteButton.onclick=函数{ todothis.id； }; }; }; //应用程序。 var bloakModel=new BloakModelXMLHttpRequest； var targetElement=document.getElementById'bloaksContainer'； var bloakView=新的BloakViewtargetElement； var bloakController=新的BloakControllerbloakModel，bloakView； bloakController.init； bloakController.getAllBloaks； 添加 代码this.doElement.innerHTML+=。。。；不正确。您使用的是+=运算符，它将自身添加一些内容，然后分配新值

新值是现有innerHTML和新HTML的结果。因此，新值[HTML]将不具有先前添加的事件处理程序，它将只复制HTML

可以使用方法附加新元素

此外，您应该避免在innerHTML中使用for循环，因为它会不断更新DOM，并且您可能会在屏幕上看到闪烁。如果必须使用innerHTML，则应该

一起创建整个HTML[innerHTML]并立即注入， 然后使用事件委派添加事件处理程序。 事件委派是一种将事件绑定到顶级容器的技术，这样您就不必担心将事件侦听器附加到每个项目

您可以阅读有关DOM的更多信息。

代码this.domeElement.innerHTML+=。。。；不正确。您使用的是+=运算符，它将自身添加一些内容，然后分配新值

新值是现有innerHTML和新HTML的结果。因此，新值[HTML]将不具有先前添加的事件处理程序，它将只复制HTML

可以使用方法附加新元素

此外，您应该避免在innerHTML中使用for循环，因为它会不断更新DOM，并且您可能会在屏幕上看到闪烁。如果必须使用innerHTML，则应该

一起创建整个HTML[innerHTML]并立即注入， 然后使用事件委派添加事件处理程序。 事件委派是一种将事件绑定到顶层的技术 容器，这样您就不必担心将事件侦听器附加到每个项

---

您可以阅读有关DOM的更多信息。

谢谢您抽出时间。这真的帮助了我：我没想到会有这样的错误：/这对我来说真的很难抓住，我花了很多时间在这上面：/这是我的荣幸！经过艰苦的学习，我接触到了各种类似的错误。同样由于副作用，这就是为什么我个人开始用更实用的方法实现我的JavaScript代码。。。很抱歉这么短的回复，我现在很忙，我在手机上输入这个，触摸屏有点坏了，哈哈。再次感谢你，知道在使用innerHTML时有一个叫做销毁所有子元素的东西真的很好：这个答案也解释了一点，我想是有道理的，看看公认的答案，@oakar这可能是我能想到的解释它的最简洁的方式了！：谢谢你抽出时间。这真的帮助了我：我没想到会有这样的错误：/这对我来说真的很难抓住，我花了很多时间在这上面：/这是我的荣幸！经过艰苦的学习，我接触到了各种类似的错误。同样由于副作用，这就是为什么我个人开始用更实用的方法实现我的JavaScript代码。。。很抱歉这么短的回复，我现在很忙，我在手机上输入这个，触摸屏有点坏了，哈哈。再次感谢你，知道在使用innerHTML时有一个叫做销毁所有子元素的东西真的很好：这个答案也解释了一点，我想是有道理的，看看公认的答案，@oakar这可能是我能想到的解释它的最简洁的方式了！：

setTimeout(() => {
    var addBloakButton = document.getElementById('addBloakButton');
    var deleteBloakButton = document.getElementById(bloakDataObjectModel.id);
    addBloakButton.addEventListener('click', this.onAddBloak);
    deleteBloakButton.addEventListener('click', this.onDeleteBloak);
}, 10);

  var div = document.createElement("div");
  div.innerHTML = '<div class="bloakContainer"><h3>' + bloakDataObjectModel.title + '</h3><p class="bloakContent">' + bloakDataObjectModel.body + '</p><label class="bloakAuthor">' + bloakDataObjectModel.userId + '</label><br /><label class="bloakDate">' + bloakDataObjectModel.id + '</label><br /><input id=' + bloakDataObjectModel.id + ' type="button" value="Delete Bloak" /></div>';
  this.domElement.append(div);

  var addBloakButton = document.getElementById('addBloakButton');
  var deleteBloakButton = div.querySelector('input[id*="' + bloakDataObjectModel.id + '"]');
  addBloakButton.addEventListener('click', this.onAddBloak);
  deleteBloakButton.addEventListener('click', this.onDeleteBloak);

// Within the controller part... 
BloakController.prototype.getAllBloaksList = function getAllBloaksList(allBloaksList) {
  for (var i = 0; i < allBloaksList.length; i++) {
    var bloak = allBloaksList[i];
    var bloakDataObjectModel = {
      title: bloak.title,
      body: bloak.body,
      userId: bloak.userId,
      id: bloak.id
    };

    this.view.render(bloakDataObjectModel);
  }

  this.view.dispatchEvents();
};


// .. Within the View part...
BloakView.prototype.dispatchEvents = function () {
  var list = this.domElement.querySelectorAll(".bloakContainer");
  var todo = this.onDeleteBloak;

  list.forEach(function (div) {
    var deleteButton = div.querySelector("input[type=button]");

    deleteButton.onclick =  function () {
      todo(this.id);
    };
  });
};