Як я пов'язую підказки інструментів Twitter Bootstrap з динамічно створеними елементами?

Я використовую підказки для завантаження у Twitter із JavaScript, наприклад:

$('a[rel=tooltip]').tooltip();

Моя розмітка виглядає так:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

Це прекрасно працює, але я додаю <a>елементи динамічно, і підказки не відображаються для цих динамічних елементів. Я знаю, що це тому, що я пов'язую .tooltip () лише один раз, коли документ закінчується завантаженим типовою $(document).ready(function()функцією jquery .

Як я можу пов’язати це з динамічно створеними елементами? Зазвичай я б це робив методом jquery live (). Однак, що таке подія, яку я використовую для зв’язування? Я просто не впевнений, як підключити завантажувальний файл .tooltip () за допомогою jquery .live ().

Я знайшов один із способів зробити цю роботу приблизно таким:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

Це працює, але здається своєрідним хакером. Я також дзвоню точно таку саму лінію .tooltip () у виклику $ (готовий). Отож, чи існують елементи, коли сторінка завантажується вперше і збігається з цим селектором в кінці підказки двічі?

Я не бачу проблем із таким підходом. Я просто шукаю найкращу практику чи розуміння поведінки.

Спробуйте це:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

Якщо у вас є кілька конфігурацій підказок, які ви хочете ініціалізувати, це добре працює для мене.

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

Потім можна встановити властивість для окремих елементів за допомогою dataатрибутів.

Для мене лише ловлі події миші, було трохи помилковим, і підказка не відображалася / ховалася належним чином. Мені довелося це написати, і воно зараз працює чудово:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

Тут я розмістив довшу відповідь: https://stackoverflow.com/a/20877657/207661

TL; DR: Вам потрібен лише один рядок коду, який запускається в документі, готовому до документа:

$(document.body).tooltip({ selector: "[title]" });

Інший складніший код, запропонований в інших відповідях, не здається необхідним (я протестував це за допомогою Bootstrap 3.0).

Для мене цей js відтворює ту саму проблему, що і з Паолою

Моє рішення:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

Замість того, щоб шукати його в повному обсязі. Можна просто використовувати варіант динамічного заголовка, який уже доступний у таких сценаріях:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

Я знайшов, що комбінація цих відповідей дала мені найкращий результат - дозволяючи мені все-таки розташувати підказку та приєднати її до відповідного контейнера:

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

Відповідний HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>