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

Question

html

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

JS

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>

Answer 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

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

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

Answer 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

在这里测试