Problemas con Infinite Scroll + Bootstrap

RoNiK #1 Abr '13

Bueno el problema no es sólo con Bootstrap, pero el que tengo en concreto sí.

Usando la paginación de Infinite Scroll, cuando paso a la segunda página todos los demás jQuerys que tenga no funcionan... tooltips, popovers etc. No lo detecta cuando eso :/

Alguien sabe cómo puedo solucionar esto?

No sé cómo extenderme más, pero supongo que si alguien conoce estas dos cosas sabrá por dónde van los tiros.

djtonight #2 Abr '13 fap caster

pon un ejemplo de jQuery que te falle

1 respuesta

RoNiK #3 Abr '13

#2 Lo que puse en #1 los Popovers y tooltips de boostrap no funcionan cuando paso a la segunda página de Infinite Scroll

Ah igual te referías a poner el código, pero es que es Bootstrap, un plugin tendría que buscar exactamente dónde está.

Pero lo que si uso para activar por ejemplo los tooltip es

jQuery(function () {
				jQuery('[rel=tooltip]').tooltip();
			});

djtonight #4 Abr '13 fap caster

Me pasó una vez haciendo una web que cargaba dinamicamente en AJAX que me fallaban esas cosillas... y fue porque en webs así hay que usar live.

$('dt img,#attachment_131 img').live("mouseout",function(){
			  $(this).css('background','#111');
	});

Pero claro, si estas usando un framework....me imagino que tendrá alguna opción para decirle que la web es de este tipo o algo así.
Busca en la documentación algo de eso, "Bootstrap on AJAX websites" o algo así

1 respuesta

S

Sarwaz #5 Abr '13

Seguramente estas destruyendo y creando el html de nuevo al navegar, por lo tanto los eventos se pierden. Tienes que volver a crearlos, o usar "delegates": http://api.jquery.com/on/
Para informacion de lo que son los aqui http://api.jquery.com/delegate/

1 respuesta

RoNiK #6 Abr '13

#4 #5

Solucionado, gracias a ambos.

Yo por ejemplo llamaba al popover de Boostrap así

jQuery(function () {
 jQuery('[rel=popover]').popover({ trigger: 'hover', html : true }).on("hover", function(){
  jQuery(".puntuacion").jRating({isDisabled : true,type:'small' });
    });
});

Ahora he puesto

jQuery(function () {
 jQuery('[rel=popover]').on("hover", function(){
  jQuery('[rel=popover]').popover({ trigger: 'hover', html : true }).on("hover", function(){
   jQuery(".puntuacion").jRating({isDisabled : true,type:'small' });
  });
 });
});

Y funciona, no sé muy bien ni como lo he hecho pero funciona que es lo importante.

Lo dicho gracias!

S

Sarwaz #7 Abr '13

Por cierto donde usas jQuery() puedes usar simplemente $()

1 respuesta

DarkSoldier #8 Abr '13

#7 yo cuando he necesitado algo así siempre he usado http://simplehtmldom.sourceforge.net/

hace relativamente poco parsee un foro en phpBB enterito, tengo todo un foro con mas de 20k mensajes en un json xDDD

1 respuesta

elkaoD #9 Abr '13

#8 wrong thread?

1 1 respuesta

JuAn4k4 #10 Abr '13

La historia es, que:

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

se ejecuta en el momento, siempre puedes hacer

// plugins y demás que no pueden ser .live ni .on('event', 'selector', fn)
$.fn.init = function(el) {
   $(el).find('[rel=tooltip]').tooltip();
}


$(document).ready(function() {
   // init body
   $("body").init();

   // live events (will work on loaded content)
   $("body").on("click", ".some-click", function (e) { e.preventDefault(); });   


$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height()-100) {            
         $.ajax({
           type: "GET",
           url: 'loquesea',
           success: function (data) {
               var whereToAppend = $(".....");
               whereToAppend .append(data);
               // Aqui ejecutas el tooltip para todo lo que esté dentro del nodo cargado, y no en el resto del doc.
               whereToAppend.children().last().init();
          }
        });

    } 
});


});

DarkSoldier #11 Abr '13

#9 JAJA pues si xDDDD

Problemas con Infinite Scroll + Bootstrap

Usuarios habituales

Tags