JavaScript鼠標單擊addEventListener不工作

即// ADD PANEL TO BODY事件正在調用addEventListener("click", forgotPassword)不起作用。請幫助解決這個問題。JavaScript鼠標單擊addEventListener不工作

的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>

來源

2015-12-21 DININDU

DOM是不是當你取的forgot_password元素準備。因此，沒有綁定。將邏輯放入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中或使用模板。

來源

2015-12-21 05:05:28 NGPixel

即使你把它放在'DOMContentLoaded'裏面，它也不起作用。你可以控制'forgot_password_btn'，你可以在那裏得到它。似乎是一些其他問題。把它放在'onload'回調裏面，但我正在尋找令人信服的理由。請參閱：https://jsfiddle.net/8hz1bpt4/3/ – Rayon

問題是「document.body.innerHTML + = theme_panel;」線。它與處理程序混淆。就像我說的那樣，這不是插入HTML的好方法，並且可能會導致其他問題。 – NGPixel

可能是這樣做的更好的方式，因爲'document.body.innerHTML + = theme_panel; '會殺死事件監聽器。 https://jsfiddle.net/8hz1bpt4/6/ – Rayon

JavaScript鼠標單擊addEventListener不工作

回答

相關問題