JavaScript Мышь Click addEventListener не работает

Это addEventListener("click", forgotPassword) не работает, когда // ADD PANEL TO BODY событие вызывает. Пожалуйста, помогите исправить это.JavaScript Мышь Click 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 элемент. Следовательно, привязка не производится. Поместите логику внутри событии загрузки:

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); 
    } 
};

Кроме того, вы должны избегать вставки содержимого HTML непосредственно в JS, как это. Поместите его в HTML или используйте шаблоны.

источник

2015-12-21 05:05:28 NGPixel

Даже если вы положили его внутри 'DOMContentLoaded', это не сработает. Вы можете отключить 'forget_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 Мышь Click addEventListener не работает

ответ

Смежные вопросы