Question

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

的链接

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

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

$('.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类的新锚点不会发生任何事件。我的问题是如何在jquery中为这个新创建的dom添加一个事件监听器？

做了一些研究之后我就这样解决了：

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

但是当我们悬停链接时似乎我们一次又一次地添加相同的事件而没有任何理由，所以这里有一个问题，我们可以为这个新创建的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();
});

Answer 2

使用data()

创建一个标记以跟踪

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

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

2 个答案: