JavaScript 鼠标点击 addEventListener 不工作

Question

addEventListener("click", forgotPassword) 在调用 // ADD PANEL TO BODY 事件时不起作用。请帮忙解决这个问题。

Javascript:

var forgot_password_btn = document.querySelector("#forgot_password");
var theme_panel = "<div id=\"change-theme\"><a href=\"javascript:;\" class=\"dark\">DARK</a><a href=\"javascript:;\" class=\"light\">LIGHT</a></div>";

if (forgot_password_btn) {
    forgot_password_btn.addEventListener("click", forgotPassword);
}

function forgotPassword() {
    console.log("clicked");
}

// ADD PANEL TO BODY
window.onload = function () {
    document.body.innerHTML += theme_panel;
};

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a href="#" id="forgot_password">Forgot</a>
</body>
</html>

Answer 1

当您获取 forgot_password 元素时，DOM 尚未准备好。因此，不进行绑定。将逻辑放在 onload 事件中：

function forgotPassword() {
    console.log("clicked");
}

// ADD PANEL TO BODY
window.onload = function () {

    var forgot_password_btn = document.querySelector("#forgot_password");
    var theme_panel = "<div id=\"change-theme\"><a href=\"javascript:;\" class=\"dark\">DARK</a><a href=\"javascript:;\" class=\"light\">LIGHT</a></div>";

    if (forgot_password_btn) {
        forgot_password_btn.addEventListener("click", forgotPassword);
    }
};

此外，你应该避免像那样直接在JS中插入HTML内容。将其放入 HTML 或使用模板。

JavaScript 鼠标点击 addEventListener 不工作

JavaScript Mouse Click addEventListener Not Working

html

javascript

addeventlistener