英文:
Why does vanilla js addEventListener not work in WordPress?
问题
我检查了其他类似的问题，但它们的代码都有错误。
这是一个不同的情况。
这段代码中的jQuery部分工作正常，但如果我使用原生JavaScript，点击事件不会触发，也没有控制台错误。
该脚本在页面元素加载完成后在body底部运行。
// jQuery - 这个可以工作
const openSearchButton = $(".js-search-trigger");
openSearchButton.on("click", () => console.log("hello"));
// 原生JavaScript - 这个不行
const openSearchButton = document.querySelector(".js-search-trigger");
openSearchButton.addEventListener("click", () => console.log("Hello"));
英文:
I checked other questions which are similar but they are all having mistakes in the code.
This is a different case.
The jQuery part in this code is working fine but if I work with the vanilla js, the click event is not triggered and no console error detected.
The script is run at the bottom of the body after the elements are loaded.
//jQuery - this works
const openSearchButton = $(".js-search-trigger");
openSearchButton.on("click", () => console.log("hello"));
//Vanilla JS - this does not
const openSearchButton = document.querySelector(".js-search-trigger");
openSearchButton.addEventListener("click", () => console.log("Hello"));
答案1
得分: 2
querySelector只对第一个匹配的元素起作用：
// jQuery
const openSearchButton = $(".js-search-trigger");
openSearchButton.on("click", () => console.log("jquery"));
// Vanilla JS
const openSearchButtonTwo = document.querySelector(".js-search-trigger");
openSearchButtonTwo.addEventListener("click", () => console.log("vanilla"));
从评论中可以看出，页面上还有另一个（隐藏的）具有相同类名的元素，因此需要使用querySelectorAll。
jQuery会自动为您迭代整个结果列表，但在原生JavaScript中，您需要显式执行此操作：
const openSearchButtons = document.querySelectorAll(".js-search-trigger");
[...openSearchButtons].forEach(button => {
button.addEventListener("click", () => console.log("all vanilla"));
})
请注意，以上是翻译的代码部分，不包括注释。
英文:
querySelector only acts on the first matching element:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const openSearchButton = $(".js-search-trigger");
openSearchButton.on("click", () => console.log("jquery"));
//Vanilla JS
const openSearchButtonTwo = document.querySelector(".js-search-trigger");
openSearchButtonTwo.addEventListener("click", () => console.log("vanilla"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="js-search-trigger">Button one</button>
<button class="js-search-trigger">Button two</button>
<!-- end snippet -->
From comments, you have another (hidden) element on the page with the same class, so need to use querySelectorAll instead.
jQuery automatically iterates over the whole list of results for you, but in vanilla you have to do that explicitly:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const openSearchButtons = document.querySelectorAll(".js-search-trigger");
[...openSearchButtons].forEach(button => {
button.addEventListener("click", () => console.log("all vanilla"));
})
<!-- language: lang-html -->
<button class="js-search-trigger">Button one</button>
<button class="js-search-trigger">Button two</button>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论