Как привязать всплывающие подсказки 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). Итак, элементы, которые существуют, когда страница сначала загружается и соответствует этому селектору, заканчиваются всплывающей подсказкой дважды?

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

Ответы на вопрос(7)

Ваш ответ на вопрос