Как выполнить код при появлении в DOM элемента, соответствующего селектору?

Question

[Dickie Dick]

Здравствуйте! Мне нужно активировать на странице tooltip'ы, выполнив всего одну строчку кода:
$('[data-toggle="tooltip"]').tooltip();

Однако блок, к которому это все должно применяться, по всей видимости, подгружается посредством ajax, так как выполнение этого кода по событию "ready" не дает результата.

Если бы мне нужно было привязать обработчик события "click", то это было бы намного проще, скажем:

$('body').on('click', '[data-toggle="tooltip"]', function() {
...
});

В поисках решения я надеялся найти на просторах интернета что-нибудь похожее на это:

$('body').on('DOMElementAdded', '[data-toggle="tooltip"]', function() {
...
});

Но в jQuery, насколько понимаю, так делать нельзя. Была только инфа про различные дополнения к jQuery, но подключать что-то стороннее не хочется. Еще встретил описание вот такого API:
https://developer.mozilla.org/en-US/docs/Web/API/M...
но не слишком ли это замороченно, разве нет более компактных и простых вариантов кода для такой ситуации, в jQuery или стандартном JS? Сможет ли кто-нибудь просветить, какой способ решения этой задачи оптимален в настоящее время?

Comments

[WapSter]

И в чем же замороченность mutationObserver?

[Dickie Dick]

WapSter, ну все же он достаточно многословен, мне казалось, что уж точно должен существовать способ обойтись буквально парой строчек кода. Ну, нет так нет, пошел читать мануал по mutationObserver

Answer 1

[hzzzzl]

таймаут на 5 секунд поставить, в надежде что юзер не побежит сразу смотреть все тултипы? :)

Comments

[Dickie Dick]

А если все же побежит?) Хотелось бы как-то изящнее решить этот вопрос)

[hzzzzl]

Dickie Dick, а что если повесить эту фиговину
$('[data-toggle="tooltip"]').tooltip();
на первый hover на элементе через jQuery.one()?

[Dickie Dick]

hzzzzl, к сожалению, у меня этот вариант не взлетел, но вообще прием интересный, возьму на заметку, спасибо)

[Dickie Dick]

hzzzzl, в конце концов все же воспользовался Вашей идеей, но только вместо события hover взял mouseenter, с hover оно почему-то не отрабатывало. Получилось как-то так:

$('.outer').one('mouseenter', '.inner', function(){
        $('[data-toggle="tooltip"]').tooltip();
});

, где .outer - внешний блок, стопроцентно присутствующий в DOM на момент срабатывания события ready,
.inner - внутренний блок, содержащий тултипы, который в моем случае подгружается по ajax и в момент события ready может как быть, так и отсутствовать в верстке - как бог пошлет.

Тултипы могут навешиваться с небольшим опозданием, меньше секунды, но в целом вариант вполне рабочий. Благодарю еще раз!

Answer 2

[Pashok Doom]

Обновляй тултипы после всех аяксов https://jquery-docs.ru/ajaxComplete/ и всё