¿Cómo vinculo la información sobre herramientas de Twitter Bootstrap a elementos creados dinámicamente?
Estoy usando información sobre herramientas de arranque de Twitter con javascript como el siguiente:
$('a[rel=tooltip]').tooltip();
Mi marcado se ve así:
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
Esto funciona bien, pero agrego <a>elementos dinámicamente y la información sobre herramientas no aparece para esos elementos dinámicos. Sé que es porque solo vinculo .tooltip() una vez cuando el documento termina de cargarse con la $(document).ready(function()funcionalidad típica de jquery.
¿Cómo puedo vincular esto a elementos creados dinámicamente? Normalmente haría esto mediante el método jquery live(). Sin embargo, ¿cuál es el evento que utilizo para vincularme? Simplemente no estoy seguro de cómo conectar bootstrap .tooltip() con jquery .live().
He encontrado una forma de hacer que esto funcione es algo como esto:
/* 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();
});
Esto funciona, pero parece un poco complicado. También estoy llamando exactamente a la misma línea .tooltip() en la llamada $(ready). Entonces, ¿los elementos que existen cuando la página se carga por primera vez y coinciden con ese selector terminan con la información sobre herramientas dos veces?
No veo ningún problema con este enfoque. Solo estoy buscando una mejor práctica o comprensión del comportamiento.
Si tiene varias configuraciones de información sobre herramientas que desea inicializar, esto funciona bien para mí.
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
Luego puede establecer la propiedad en elementos individuales utilizando dataatributos.
Para mí, solo detectar el evento mouseenter tuvo algunos errores y la información sobre herramientas no se mostraba/ocultaba correctamente. Tuve que escribir esto y ahora funciona perfectamente:
$(document).on('mouseenter','[rel=tooltip]', function(){
$(this).tooltip('show');
});
$(document).on('mouseleave','[rel=tooltip]', function(){
$(this).tooltip('hide');
});
Publiqué una respuesta más larga aquí: https://stackoverflow.com/a/20877657/207661
TL;DR: Solo necesita una línea de código que se ejecute en el evento de documento listo:
$(document.body).tooltip({ selector: "[title]" });
Otro código más complicado sugerido en otras respuestas no parece necesario (lo he probado con Bootstrap 3.0).
Para mi este js reproduce el mismo problema que pasa con Paola
Mi solución:
$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
$(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});
