Как привязать всплывающие подсказки Twitter Bootstrap к динамически создаваемым элементам?

Я использую всплывающие подсказки начальной загрузки Twitter с javascript следующим образом:

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

Моя разметка выглядит так:

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

Это работает нормально, но я добавляю элементы динамически, а всплывающие подсказки не не отображается для этих динамических элементов. Я знаю, это потому, что я привязываю .tooltip() только один раз, когда документ загружается с типичной функциональностью jquery $(document).ready(function().

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

Я не вижу проблем с этим подходом. Я просто ищу передовой опыт или понимание поведения.

262
задан durden2.0 31 March 2012 в 15:47
поделиться