javascript - 在替换的 HTML DOM 上添加事件监听器

Question

我正在使用 tooltipster jquery 插件以更好的方式显示标题。在我的站点中，有两个类的链接 .fav tooltip

<div class="actsave">
    <a href="#" class="fav tooltip" title="Save">Save</a>
</div>

.tooltip 用于获取上面的 anchor 标题并根据工具提示插件显示它。

$('.tooltip').tooltipster();

这工作得很好，但是当用户单击此链接时，整个 DOM 将被替换为新的 DOM。

$("div.actsave").on("click", "a.fav", function(e){
    e.preventDefault();
    $(this).replaceWith('<a href="#" class="del tooltip" title="Delete">Delete</a>');
});

此时，带有 .del 类的新 anchor 没有发生任何事件。我的问题是如何在 jquery 中向这个新创建的 dom 添加事件监听器？

在做了一些研究之后，我以这种方式修复它:

$("div.actsave").on("mouseover mouseout", "a.del", function(e){
    $(e.target).tooltipster();
});

但是当我们将鼠标悬停在链接上时，似乎我们无缘无故地一次又一次地向 dom 添加相同的事件，所以这里的问题是我们可以只向这个新创建的 dom 添加一个事件监听器一次吗？

Answer 1

$("div.actsave").on("click", "a.fav", function(e){
    e.preventDefault();
    var newElement = $('<a href="#" class="del tooltip" title="Delete">Delete</a>');
    $(this).replaceWith(newElement);
    newElement.tooltipster();
});