在替换的 HTML DOM 上添加事件侦听器

Question

我正在使用工具提示 jquery 插件以更好的方式显示标题。在我的站点中有一个 link 和两个 classes .fav tooltip

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

.tooltip用于取上面的锚标题，根据tooltipster插件显示。

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

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

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

此时 .del class 的新锚没有发生任何事件。我的问题是如何向 jquery 中新建的 dom 添加事件监听器？

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

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

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

Answer 1

创建一个标记以使用 data()

进行跟踪

$("div.actsave").on("mouseover mouseout", "a.del", function (e) {
    if (!$(this).data('triggered')) {
        $(e.target).tooltipster();
        $(e.target).data('triggered', true);
    }
});

Answer 2

$("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();
});

在替换的 HTML DOM 上添加事件侦听器

Adding event listener on a replaced HTML DOM

html

javascript

jquery

dom

tooltipster