Problema con qTip: no se muestran las sugerencias porque los elementos se cargan después de la secuencia de comandos

No tengo mucha experiencia con javascript, jQuery o sus complementos, pero generalmente los administro. De todos modos, mi cliente está construyendo un sitio y uno de sus propósitos es recoger artículos de noticias de diferentes sitios y mostrar los títulos en listas html no ordenadas. No tengo acceso a su código, los artículos de noticias se cargan bastante lento (mucho después de que el sitio se haya cargado).Problema con qTip: no se muestran las sugerencias porque los elementos se cargan después de la secuencia de comandos

Estoy usando qTIP y la idea es que una vez que pase el puntero del título de una noticia, genere una información sobre herramientas. Esto funciona bien en mi entorno de desarrollo, porque tengo títulos ficticios que no se generan desde ningún lugar.

El problema es que una vez que el cliente configura el sitio en su entorno de prueba, los scripts que cargan los títulos de noticias en las listas son tan lentos que el qTIP-script se carga antes de que haya elementos en las listas. Por lo tanto, no tiene conocimiento de ningún <li> para recoger y generar información sobre herramientas.

¿Hay alguna manera de asegurarse de que TODOS los artículos de noticias se carguen antes de que se carguen los tooltip-script ? Creo que un simple retraso en la carga del script no es muy inteligente porque algunos de los títulos tardan más en cargarse que otros, por lo que el retraso debería ser bastante largo.

Fuente

2010-01-05 msvalkon

dónde está el código? ¿Cómo inicias qTip? ¿Estás cargando los títulos de noticias con ajax? –

Lo siento, pensé que era claro, pero no tengo acceso al código que carga los títulos de las noticias. – msvalkon

Debe utilizar Live Events de jQuery framework.

Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.

así por ejemplo se podría hacer algo como

$("li").live('mouseover', function(){ 
            $(this).qTip(...); 
            });

ref: http://docs.jquery.com/Events/live

Fuente

2010-01-05 17:31:06

+1 Este es definitivamente el camino a seguir. Esto evita que necesites volver a vincular todos tus eventos a medida que el ajax se agrega a tu página. –

Muchas gracias, estaba pensando en usar bind(), no sabía nada de esto. – msvalkon

de nada, solo lo he descubierto recientemente. pero es un salvavidas –

Ver mi actualización en la parte inferior

He estado trabajando en este problema como bien, y se le ocurrió una solución similar a la proporcionada por @Gaby. El problema con la solución de @Gaby es que no crea la punta q hasta que se produce el evento mouseover. Esto significa que no verá la sugerencia q la primera vez que pase el mouse, pero la verá la segunda vez. Además, recreará la punta q cada vez que mueva el mouseover, lo que no es exactamente óptimo.

La solución fui con es la siguiente:

$("li").live('mouseover', function() { 
    var target = $(this); 
    if (target.data('qtip')) { return false; } 
    target.qtip(...); 
    target.trigger('mouseover'); 
});

Esto es lo que hace:

pone fecha al elemento li
Devuelve si ese elemento li ya tiene un qtip
Si no hay qtip en li, entonces se aplica qtip
Se vuelve a activar el mouseover para que qtip se acti vated

Sé que esto es un poco hacky, pero parece que funciona. También tenga en cuenta que el 2.0 version of qTip should support live() como una opción. Por lo que puedo decir, el current 2.0 development branch aún no lo admite.

ACTUALIZACIÓN:

Ésta es la forma correcta de hacer esto, directamente desde el propio desarrollador qtip en los foros:

$('selector').live('mouseover', function() { 
    $(this).qtip({ 
     overwrite: false, // Make sure another tooltip can't overwrite this one without it being explicitly destroyed 
     content: 'I\'m a live qTip', // comma was missing here 
     show: { 
     ready: true // Needed to make it show on first mouseover event 
     } 
    }); 
})

Por lo tanto, primero se asegura de que no se vuelva a crear nuevos qtips cada mouseover con "sobrescribir: falso". Luego hace que el qtip se muestre en el primer mouseover con "show: {ready: true}".

Fuente

2010-03-21 03:53:05 Tauren

Acabo de editar mi respuesta para incluir una solución aún mejor. – Tauren

¡GRACIAS! ¡Funcionó como por arte de magia! – Loony2nz

esto no funciona, qtip todavía no aparece, no se produce ningún error, se activa el evento, las cargas qtip pares. – KJW

-1

Sí me ocurrió algo similar. Creo que alguien publicó uno similar en sus foros también. Cambié el mouseover-event a mousemove para que la qtip se active en el primer mouseover.

$('li').live('mousemove', function() { 
    if(!$(this).data('qtip')) { 
    $(this).qtip(...)

También estoy de acuerdo en que esta es una solución muy hacky, sin embargo no pude encontrar una mejor. Quizás revisar y aplicar el qtip en la función de devolución de llamada que llena el li sería mejor, pero realmente no tengo acceso a ese código.

Fuente

2010-03-24 12:33:51 msvalkon

No por nada, pero acabo de agregar el show:{ready:true} en mi evento onmouseover. Eso funcionó en Chrome & FF.

Fuente

2012-03-30 20:08:56

Problema con qTip: no se muestran las sugerencias porque los elementos se cargan después de la secuencia de comandos

Respuesta

Cuestiones relacionadas