Onclick 不适用于动态渲染 html

Question

我想创建一种方法来在 div 中呈现新按钮，然后在其上添加一些单击事件。 这是我的代码：

 let create = () => { function abc() { alert("abc") } let t = document.querySelectorAll(".here")[0]; t.innerHTML = "<button onclick='abc()'>click me 2</button>"; } document.querySelector("#clickme").addEventListener("click", () => { create() })

 <button id="clickme"> click me </button> <div class="here"> a </div>

点击“click me 2”，为什么我的abc()没有定义？

Answer 1

点击“click me 2”，为什么我的 abc() 没有定义？

因为属性事件处理程序在全局 scope 中查找方法，而您的abc方法不在全局 scope 中，它在create的 scope 中

Answer 2

The function call inside onclick attribute (and other attribute even handlers) are run in global scope so it has no access to this abc function.

所以onclick='abc()'等价于onclick='window.abc()'

您有两种方法可以使其工作：

1- window.abc = abc ：

let create = () => {
    function abc() {
        alert("abc")
    }

    window.abc = abc;

    let t = document.querySelectorAll(".here")[0];
    t.innerHTML = "<button onclick='abc()'>click me 2</button>";
}

这不是真的推荐。

2-使用addEventListener这是这里的最佳选择：

let create = () => {
    function abc() {
        alert("abc")
    }

    let t = document.querySelectorAll(".here")[0];
    t.innerHTML = "<button id='clickme2'>click me 2</button>";

    const clickme2 = document.querySelector('#clickme2');
    clickme2.addEventListener('click', abc);
}