Como vincular as dicas de ferramentas do Twitter Bootstrap a elementos criados dinamicamente?
Estou usando as dicas de ferramentas de auto-inicialização do Twitter com javascript, como as seguintes:
$('a[rel=tooltip]').tooltip();
Minha marcação fica assim:
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
Isso funciona bem, mas eu adiciono<a>
elementos dinamicamente e as dicas de ferramentas não estão aparecendo para esses elementos dinâmicos. Eu sei que é porque eu só vinculo .tooltip () uma vez quando o documento é carregado com o típico jquery$(document).ready(function()
funcionalidade.
Como vincular isso a elementos criados dinamicamente? Normalmente, eu faria isso através do método jquery live (). No entanto, qual é o evento que eu uso para ligar? Só não sei como conectar o bootstrap .tooltip () com jquery .live ().
Encontrei uma maneira de fazer esse trabalho ser algo assim:
/* 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();
});
Isso funciona, mas parece meio tolo. Também estou chamando exatamente a mesma linha .tooltip () na chamada $ (ready). Portanto, os elementos que existem quando a página é carregada pela primeira vez e correspondem a esse seletor terminam com a dica de ferramenta duas vezes?
Não vejo problemas com essa abordagem. Estou apenas procurando uma melhor prática ou compreensão do comportamento.