使用 vanilla JavaScript [no jquery] 将事件绑定到动态创建的 HTML 元素
Bind event to dynamically created HTML elements with vanilla JavaScript [no jquery]
我需要将事件附加到动态创建的元素。使用 jQuery 我可以使用以下代码将其存档:
$("body").on("click", ".my-element", function() {});
如果我添加新的 .my-element
,它会自动附加事件。
我不是通过 document.createElement("div");
创建元素,而是使用 pjax 重新加载页面的某些部分,因此主 JavaScript 文件只加载一个时间,因此需要动态附加事件。
我如何使用原版 JavaScript 实现这一点?
您的 jQuery 示例的纯 JavaScript 版本
$("body").on("click", ".my-element", function() {});
将是:
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
// handle event here
}
});
请参阅下面的示例。
const addTestElements = () => {
var el = document.createElement("p"),
node = document.createTextNode("Test element, class 'my-element'");
el.classList.add("my-element");
el.appendChild(node);
document.body.appendChild(el);
el = document.createElement("p");
node = document.createTextNode("Test element, class 'test'");
el.classList.add("test");
el.appendChild(node);
document.body.appendChild(el);
}
document.getElementById("add").addEventListener("click", addTestElements);
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
console.clear();
console.log("An element with class 'my-element' was clicked.")
e.target.style.fontWeight = e.target.style.fontWeight === "bold" ? "normal" : "bold";
}
});
<button id="add">Add element</button>
我需要将事件附加到动态创建的元素。使用 jQuery 我可以使用以下代码将其存档:
$("body").on("click", ".my-element", function() {});
如果我添加新的 .my-element
,它会自动附加事件。
我不是通过 document.createElement("div");
创建元素,而是使用 pjax 重新加载页面的某些部分,因此主 JavaScript 文件只加载一个时间,因此需要动态附加事件。
我如何使用原版 JavaScript 实现这一点?
您的 jQuery 示例的纯 JavaScript 版本
$("body").on("click", ".my-element", function() {});
将是:
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
// handle event here
}
});
请参阅下面的示例。
const addTestElements = () => {
var el = document.createElement("p"),
node = document.createTextNode("Test element, class 'my-element'");
el.classList.add("my-element");
el.appendChild(node);
document.body.appendChild(el);
el = document.createElement("p");
node = document.createTextNode("Test element, class 'test'");
el.classList.add("test");
el.appendChild(node);
document.body.appendChild(el);
}
document.getElementById("add").addEventListener("click", addTestElements);
document.body.addEventListener("click", function (e) {
if (e.target &&
e.target.classList.contains("my-element")) {
console.clear();
console.log("An element with class 'my-element' was clicked.")
e.target.style.fontWeight = e.target.style.fontWeight === "bold" ? "normal" : "bold";
}
});
<button id="add">Add element</button>