如何將事件偵聽器添加到原型內動態創建的元素中？

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

您正確地添加了事件監聽器，但是卻忘記了添加元素。

我已經將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

在這里測試

Answer 2

像這樣：

 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。