1

Банальный пример: Bootstrap Tooltips

Представим некий список, где есть tooltip. Как только мы загрузили страницу, все tooltips в этом списке рабочие. Ах да, еще у нас в <head> страницы подключен файл с этим кодом:

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

Теперь добавим элемент-дубликат в этот список с помощью Ajax. Не важно как именно реализуется Ajax запрос - итог один.

У нового элемента не будет работать tooltip. Я исправляю ситуацию следующим образом: вместе с html кодом (в данном примере - html кодом элемента списка) я отправляю еще и это:

<script>$('[data-toggle="tooltip"]').tooltip();</script>

Добавили 10 элементов в список, собрали под ним 10 одинаковых строк script. Зато все работает.

Но появилась необходимость реализовать функционал далеко не просто списка. Сейчас имею множество компонентов на странице, каждый из которых работает на Ajax - пагинация, тот же список с элементами, в котором еще что-то с Ajax. Все в таком духе.

И "лечить" это так, как я это описал выше - невозможно.

Неужели нет нормального способа взаимодействия "новых элементов из ajax" с JS средой страницы?

13
  • 1
    зачем отправлять разметку <script>$('[data-toggle="tooltip"]').tooltip();</script> если вызвать эту функцию можно самому сразу после непосредственного получения?
    – Grundy
    9 фев 2017 в 14:54
  • 1
    Поздравляю, теперь вы знаете почему опытные разработчики ненавидят "магические" jquery-плагины. 9 фев 2017 в 15:00
  • @PavelMayorov, кстати, вроде бы, в jquery-ui Не надо каждый раз инициализировать
    – Grundy
    9 фев 2017 в 15:11
  • @Grundy любой динамически созданный элемент нуждается в инициализации 9 фев 2017 в 15:21
  • 1
    @Colibri Дополните вопрос куском кода, где вы "пытался инициализировать после append". Очевидно, что ответ кроется именно там. 9 фев 2017 в 17:59

1 ответ 1

1
$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});

Согласно документации будет работать для динамически добавленых элементов.

2
  • Спасибо большое! Раз уж вы уловили суть и ваш ответ верный, то помогите (очень прошу) еще с этим вопросом. Знаю, возможно наглость, но тут сложнее ситуация. Та же самая проблема, только с intercoolerjs.org. Я не знаю как тут инициализировать библиотеку после Ajax. Проблема в том, что есть Ajax пагинация. И когда переходишь на новую страницу, то Intercooler полностью перестает работать.
    – Colibri
    10 фев 2017 в 10:40
  • Создал отдельный вопрос: ru.stackoverflow.com/questions/626122/…
    – Colibri
    10 фев 2017 в 11:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.