Как привязать всплывающие подсказки Twitter Bootstrap к динамически создаваемым элементам?
Я использую всплывающие подсказки Twitter с javascript следующим образом:
$('a[rel=tooltip]').tooltip();
Моя разметка выглядит так:
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
Это отлично работает, но я добавляю<a>
элементы динамически, и всплывающие подсказки не отображаются для этих динамических элементов. Я знаю, это потому, что я связываю .tooltip () только один раз, когда документ закончен с типичным jquery$(document).ready(function()
функциональность.
Как я могу связать это с динамически созданными элементами? Обычно я делаю это с помощью метода 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 () в вызове $ (ready). Итак, элементы, которые существуют, когда страница сначала загружается и соответствует этому селектору, заканчиваются всплывающей подсказкой дважды?
Я не вижу никаких проблем с этим подходом. Я просто ищу лучшую практику или понимание поведения.