如何自动map一个function到一个新添加的DOM元素

Question

我正在尝试在香草 javascript 页面上的所有带有 class 框的元素上自动调用 function (initBox)。我已经制作了一个功能性解决方案，除了它仅适用于加载时页面上的元素。 如果我使用 javascript 将元素添加到 DOM，则不会调用 function (initBox)。

当然我可以在添加元素后手动调用 function (initBox)，但我想自动化它。

我正在寻找类似于 jQuery 为事件所做的事情。

例如：

$('table').on('click', 'td', function (event) {
    doSomething();
});

即使我稍后通过 javascript 将 TD 元素添加到表中，也会调用此事件。

这是我目前的解决方案：

 function addBox() { var btn = document.getElementsByTagName('button')[0]; var el = document.createElement('div'); el.classList.add('box'); el.innerText = (document.getElementsByTagName('div').length + 1); btn.before(el); } function initBox(el) { el.innerText += ' Initialized'; } document.querySelectorAll('.box').forEach(initBox);

 .box { display: inline-block; border: 1px solid #1f2227; padding: 20px; } button { padding: 20px; }

 <div class="box">1</div> <div class="box">2</div> <button onclick="addBox()">Add box</button>

Answer 1

OP 的问题可以通过使用MutationObserver实例来解决，其中 OP 需要从添加的节点列表中进行回调，只是为了初始化与 OP 的box定义相匹配的节点。

 function addBox() { var btn = document.getElementsByTagName('button')[0]; var el = document.createElement('div'); el.classList.add('box'); el.innerText = (document.getElementsByTagName('div').length + 1); btn.before(el); } function initBox(el) { el.innerText += ' Initialized'; } document.querySelectorAll('.box').forEach(initBox); function initializeBoxClassDivOnly(node) { if (node.nodeType === 1 && node.matches('div.box')) { initBox(node); } } function handleNodeInsertion(mutationList/*, observer*/) { for (const mutation of mutationList) { mutation.addedNodes.forEach(initializeBoxClassDivOnly); } }; const observer = new MutationObserver(handleNodeInsertion); observer.observe(document.body, { childList: true, subtree: true });

 .box { display: inline-block; border: 1px solid #1f2227; padding: 20px; } button { padding: 20px; }

 <div class="box">1</div> <div class="box">2</div> <button onclick="addBox()">Add box</button>

Answer 2

查看 Mutation Observers，它们是观察 dom 对象的新方法，当在特定 DOM 元素中添加、删除或修改项目时，它允许您运行 function，或者如果您愿意，您可以运行 go 旧学校（意味着您添加事件监听器）。

Mutation Observers（推荐方法） https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

老派 晚会 https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent

如果你想让我写代码，请在评论中告诉我。