JavaScript鼠標單擊addEventListener不起作用

Question

// ADD PANEL TO BODY調用“將// ADD PANEL TO BODY addEventListener("click", forgotPassword)事件時addEventListener("click", forgotPassword)不起作用。 請幫助解決此問題。

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不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2015-12-21 05:05:28

JavaScript鼠標單擊addEventListener不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2015-12-21 05:05:28

解決方案1
1 已采納 2015-12-21 05:05:28