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不工作

回答

相关问题