innerHTML 模板添加的功能会自动触发

Question

我遇到了这种奇怪的行为。我想添加一个包含点击行为的 html 模板。所以我尝试了下面的代码。问题是里面的函数callFunction是自动执行的。我的猜测是callFunction是在解析innerHTML中的插值字符串时执行的。有没有办法解决这种行为？谢谢你

const container = document.getElementById("test1");

function callFunction() {
  console.log('called');
}

container.innerHTML = `<button onClick="${callFunction()}"> Click on me</button>`

<div id="test1"></div>

Answer 1

模板文字中的表达式会立即执行。如果您正在创建一个 HTML 字符串，则不需要在创建它的同一范围内调用该函数。您甚至不需要模板文字。您只需要创建一个带有 onClick 属性的字符串。

container.innerHTML = '<button onClick="callFunction()"> Click on me</button>'

const container = document.getElementById("test1");

function callFunction() {
  console.log('called');
}

container.innerHTML = `<button onClick="callFunction()"> Click on me</button>`

<div id="test1"></div>

innerHTML 模板添加的功能会自动触发

functions added by innerHTML Template are triggered automatically

html

javascript

dom

string-interpolation