如何将事件侦听器添加到原型中动态创建的元素？答案

【问题标题】：How to add event listener to element created dynamically within prototype?如何将事件侦听器添加到原型中动态创建的元素？
【发布时间】：2017-06-05 13:33:23
【问题描述】：

HTML

<div id="main"></div>

var TestClass = function() {};
TestClass.prototype = {
    addElement: function(parentId) {
    var parent = document.querySelector('#' + parentId);
    var a = document.createElement('a');
    a.textContent = '+';
    a.href = '#';
    a.addEventListener('click', this.onElementClick, false); //nothing happens on click
    parent.innerHTML = a.outerHTML;
  },

  onElementClick: function() {
    console.log('dynamic element clicked');
  }
};

new TestClass().addElement('main'); // on DOM ready

输出

<div id="main"><a href="#">+</a></div>

【问题讨论】：

尝试将parent.innerHTML = a.outerHTML更改为parent.append(a);

标签： javascript addeventlistener prototype-programming

【解决方案1】：

像这样：

var TestClass = function() {};
TestClass.prototype = {
    addElement: function(parentId) {
    var parent = document.getElementById(parentId); //Changed to getElementById
    var a = document.createElement('a');
    a.textContent = '+';
    a.href = '#';
    a.addEventListener('click', this.onElementClick, false);
    parent.append(a); //Changed
  },

  onElementClick: function() {
    console.log('dynamic element clicked');
  }
};

new TestClass().addElement('main'); // on DOM ready

&lt;div id="main"&gt;&lt;/div&gt;

您没有将a 添加到parent，而是添加了它的HTML。

【讨论】：

@niksofteng 没问题，如果对您有帮助，请点赞并标记为答案。

【解决方案2】：

您正确地添加了事件侦听器，但是您忘记了添加元素。

我已将document.body.append(a) 添加到addElement 方法中。

这导致以下代码：

var TestClass = function() {};
TestClass.prototype = {
    addElement: function(parentId) {
    var parent = document.querySelector('#' + parentId);
    var a = document.createElement('a');
    a.textContent = '+';
    a.href = '#';
    a.addEventListener('click', this.onElementClick, false);
    document.body.append(a);
    parent.innerHTML = a.outerHTML;
  },

  onElementClick: function() {
    console.log('dynamic element clicked');
  }
};

new TestClass().addElement('main'); // on DOM ready

Test it out here

【讨论】：

现在 parent.innerHTML=a.outerHTML 是不必要的，你想要 parent.append(a); ...
我犹豫是否要附加到正文。为什么是身体？
所有可见内容都在body 或其子项之一中。刚刚以body 为例。这么说，对于您的用例，使用parent.append(a) 更有意义（根据@Arg0n 的回答）。