class Hello {
constructor() {
this.handleClick = this.handleClick.bind(this);
this.htmlContent = `<a onclick="this.handleClick">Button</a>`;
}
handleClick(e) {
console.log('world');
}
}
HTML看起来像：
<div id="main"></div>
“按钮”链接将被添加到页面，如下所示：
const myHello = new Hello();
document.getElementById('main').innerHTML = myHello.htmlContent;
但是，单击“按钮”不会在控制台中记录“世界”。
另外，这些也不起作用：
onclick="()=> this.handleClick()"
onclick="this.handleClick()"
我的猜测是，与这只能完成addEventListener后innerHTML设置的#main，因为直到那时myHello.htmlContent只是一个字符串？
你需要做HTMLElement的一部分Hello绑定和事件处理程序，只要innerHTML通过Hello 构造函数。
class Hello {
constructor(ele) {
this.ele = ele;
this.handleClick = this.handleClick.bind(this);
ele.innerHTML = `<a onclick="this.handleClick">Button</a>`;
ele.querySelector("a").addEventListener( "click", this.handleClick );
}
handleClick(e) {
console.log('world');
}
}
var ele = document.getElementById('main');
const myHello = new Hello( ele );<div id="main"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句