Javascript Can'；我不明白为什么这个小jquery函数是递归的

因此，我有一个小函数，当添加新的动态HTML时，它只需检查DOM，然后当鼠标进入图像时，我希望它在图像后附加一个

。它可以工作，但是它附加了9次而不是一次。我一辈子都不知道为什么

编辑-此外，在每个后续的追加操作中，它都会追加一倍于以前的数字。（第一个动作追加9次，第二个动作追加18次，以此类推）

蒂亚

$（文档）.on（'domandeinserted'，'.module'，函数（事件）{
$（'.body copy、.subhead、.lead-in、.blockquote、.disclosure text、.caption、.link text、.button、.cta'）.attr（'contenteditable'，true'）；
$（'img'）.mouseenter（函数（事件）{
$（this.parent（'td'）。append（''）；
$（this.children（'image-link'）.attr（'hover'，'true'）；
});

---

}))

有两个主要部分导致了您的问题：

您的

.on（“域节点插入”，…）

可能已运行多次

您的

$（“img”）.mouseenter（…）

正在为页面上的每个图像运行，而不管它是何时到达的

发生的情况是，每次将DOM节点添加到活动树时，都会调用该侦听器，包括侦听器本身添加的节点

正确的解决方案是将事件添加到现有节点，然后将相同的处理程序添加到任何新添加的

元素。大概是这样的：

// Factored out the listener for reuse
function listener(e) {
    $(this).parent('td').append('<span class="image-link"><a class="fa-link fa"></span>');
    $(this).children('image-link').attr('hover', 'true');
}

// Add the listener to all existing images.
$('img').on('mouseenter', listener);

// Observe for any future image additions.
new MutationObserver(function (record) {
    $(record.addedNodes).filter('img').on('mouseenter', listener);
    // Avoid memory leaks
    $(record.removedNodes).filter('img').off('mouseenter', listener);
})
.observe(document.body, {
    childList: true,
    subtree: true,
});

//将侦听器分解出来以便重用
函数侦听器（e）{
$（this.parent（'td'）。append（''）；
$（this.children（'image-link'）.attr（'hover'，'true'）；
}
//将侦听器添加到所有现有图像。
$（'img'）。on（'mouseenter'，listener）；
//观察将来是否有图像添加。
新的MutationObserver（函数（记录）{
$（record.addedNodes.filter（'img'）。on（'mouseenter'，listener）；
//避免内存泄漏
$（record.removedNodes）.filter（'img'）.off（'mouseenter'，listener）；
})
.遵守（文件正文）{
儿童名单：是的，
子树：对，
});

---

（我特别使用MutationObserver，因为出于性能原因，MutationEvents API已经有相当一段时间被弃用了，而且浏览器从未完全实现过互操作。此外，MutationObserver在这一点上具有相当广泛的兼容性。）

每当您向任何

.module

元素（

.on（'DOMNodeInserted'，'module'，function（event）{…；$（'img'）.mouseenter（…）

）添加元素时，都会在DOM中的每个图像上添加一个新的

mouseenter

事件处理程序（

）（'img'）。mouseenter（…）；}）

）因为随着每个

domanodeinserted

的添加，您会添加另一个函数，该函数会添加

span.image链接

。因此，在第5个

域节点插入之后，将有5个函数添加5个额外的跨距。明白了-有没有更好的方法来侦听添加到DOM中的节点？否则，我无法让函数识别动态添加的元素，但我不知道其他方法如何。“我无法让函数识别动态添加的元素”您已经设置了一个“委托”事件，该事件也作用于动态添加的元素：
。on（'domandeinserted'，'.module'，function（event）{…}）
对，但是，有没有一种方法可以这样做，使它不会对我所针对的特定对象多次执行委托事件中的函数？（我翻过的一张照片）
// Factored out the listener for reuse
function listener(e) {
    $(this).parent('td').append('<span class="image-link"><a class="fa-link fa"></span>');
    $(this).children('image-link').attr('hover', 'true');
}

// Add the listener to all existing images.
$('img').on('mouseenter', listener);

// Observe for any future image additions.
new MutationObserver(function (record) {
    $(record.addedNodes).filter('img').on('mouseenter', listener);
    // Avoid memory leaks
    $(record.removedNodes).filter('img').off('mouseenter', listener);
})
.observe(document.body, {
    childList: true,
    subtree: true,
});