2

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

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

用于获取上述.tooltip锚标题并根据 tooltipster 插件显示。

$('.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 添加相同的事件，没有任何理由，所以这里的问题是我们可以一次向这个新创建的 dom 添加一个事件侦听器吗？

4

2 回答 2

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();
});
于 2015-08-15T12:09:02.560 回答
0

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

$("div.actsave").on("mouseover mouseout", "a.del", function (e) {
    if (!$(this).data('triggered')) {
        $(e.target).tooltipster();
        $(e.target).data('triggered', true);
    }
});
于 2015-08-15T11:15:49.243 回答