Question

我在将事件侦听器添加到JS时遇到问题...如果我使用onclick属性连接按钮可以正常工作，但是如果我在HTML中将其删除并尝试添加eventListener（'click'，myFunction），则无法正常工作。顺便说一句，它是一个简单的下拉按钮。

在下面的按钮示例中，我删除了onclick =“ myFunction”并添加了它->

JAVASCRIPT 

document.getElementById("btn").addEventListener('click', myFunction);

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}



HTML
<button id="btn" class="dropbtn">RECEPT</button>
                  <div id="myDropdown" class="dropdown-content">
                    <ul>
                    <li>-5 jaja</li>
                    <li>-0.2l mleka</li>
                    <li>-100g slanine</li>
                    <li>-200g brasna</li>
                    <li>-10g putera</li>
                    <li>-50g sira</li>
                    <p class="recipeInfo">Kuvati na laganoj vatri i ostaviti da se krcka 5 minuta</p>
                    </ul>
                  </div>

我不知道这是什么问题，也不知道解决方案...有帮助吗？

Answer 1

您可能正在尝试在DOM元素准备好之前访问它们。尝试将Javascript代码放在DOMContentLoaded侦听器中：

document.addEventListener("DOMContentLoaded", function(event) { 
    // put your javascript code here
});

这将确保您的Javascript代码将有权访问所有DOM元素。在$(document).ready equivalent without jQuery

中了解更多信息

Answer 2

我认为问题在于您没有等待页面完全加载。使用jQuery确保页面已加载。

然后将jQuery on用于click事件

$(document).ready(function(){

$("#btn").on('click', myFunction);

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

});

Answer 3

一年多以后，但仍然可能对某人有用：

我在服务器迁移到AWS后停止工作的javascript ajax请求中苦苦挣扎。

几个小时后试图找出问题所在，然后我意识到我在使用

window.addEventListener("DOMContentLoaded", function(event) { ...}

代替

document.addEventListener("DOMContentLoaded", function(event) { ...}

一旦我更改为“ document。”，对我的服务的每个ajax请求都会得到正确的响应。

我不是JavaScript开发人员，也许正因为如此，这对我来说是一场噩梦

希望有帮助

Answer 4

您必须等待页面加载。但是您不需要jQuery，可以将js代码包装在一个自执行函数中，如下所示：

(function(){
    // your code
}())

addEventListener不能正常工作

4 个答案: