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>
最佳答案
像这样:
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。
关于javascript - 如何将事件监听器添加到在原型(prototype)中动态创建的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44370194/