Добавление прослушивателя событий в замененный HTML DOM

Question

Я использую плагин 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 учебный класс. Мой вопрос заключается в том, как я могу добавить слушатель событий для этого недавно созданного DOM в JQuery?

После некоторого исследования я исправляю это так:

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

Answer 2

Создайте флаг для отслеживания с помощью data()

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