[SOLUCIONADO] No funciona eventos .hover() y .click() de pagina cargada mediante $.ajax

kairosprod · #1 (**permalink**) 12/08/2015, 14:35

Hola, es mi primera publicación, asi que disculpenme si tengo problemas en hacerme entender.

Mi problema es el siguiente, tengo un menú y un contenedor de 3 cajas, cuando el mouse esta encima de cada caja, cambia de color a rojo y lo hago mediante ".hover()", tambien al hacer click en cada caja me muestra una alerta , hasta ahí funciona perfecto..., pero cuando llamo mediante ajax pulsando el enlace "mas cajas" para que carguen otras cajas en el mismo contenedor, en estas cajas ya no me funcionan los eventos ".hover()" ni ".click()"

.

Les paso mi codigo, este solo es un ejemplo pequeño, por favor ayudenme a solucionar este problema.

Código:

<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="utf-8">
   <title>EJEMPLO</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
   <script>
		$(document).ready(function(){
		    $("div.menu").click(function(){
				$.ajax({
					url:'./archivo2.php',
					success:function(data){
						$("#contenedor").html(data);
					}
				});
			});

		    $("div.caja").hover(function(){
				$(this).css({'background-color': 'red'});
			},function(){
				$(this).css({'background-color': ''});
		    });

		    $(".caja").click(function(){
		    	alert("Haz echo click en una caja");
		    });
		});
   </script>
   <style type="text/css">
   	#mmm{clear:both;overflow:hidden;}
   	.menu{float:left;margin-right:20px;padding:10px;}
	.caja{width:100px;height:100px;background:#6699cc;float:left;margin-right:10px;}
	.cajax{background:#006600;}
   </style>
</head>
<body>
<div id="mmm">
<div class="menu">cajas rojas</div>
<div class="menu">cajas verdes</div>
</div>
<div id="contenedor">
	<div class="caja"></div>
	<div class="caja"></div>
	<div class="caja"></div>
</div>
</body>
</html>

esto es lo que cargo mediante ajax al contenedor

Código:

<div class="caja cajax"></div>
<div class="caja cajax"></div>
<div class="caja cajax"></div>

En varios proyectos he tenido el mismo problema y solo lo trate de "solucionar" copiando el mismo script en las paginas que cargaba mediante el ajax, aunque se que eso esta mal, porque cargo el mismo script dos veces, ademas de que cuando hago 1 click, me devuelve la respuesta de 2 click porque cargue el script ya dos veces.

Alexis88 · #2 (**permalink**) 12/08/2015, 15:50

Lo que sucede es que al ser elementos que cargan después del haber cargado el script, ya no se ven afectados pues para el script no existen. Lo que debes de hacer es delegar el evento click al documento y desde ahí afectarlos.

Por ejemplo, supongamos que fuera a cargar botones con la clase "foo" y quiero que al darle un clic a cualquiera de ellos, me muestre un mensaje de alerta con el id del botón pulsado.

Código Javascript:

Ver original$(document).on("click", ".foo", function(){
    alert($(this).prop("id"));
});

Saludos

kairosprod · #3 (**permalink**) 12/08/2015, 16:58

Hola Alexis88, muchas gracias por informarme el porque no funcionaba, entendí perfectamente y el Click ya esta solucionado delegando la responsabilidad al document, ahora si no es mucha molestia, como podría hacer con el "hover", ya que vi que "on" con "hover" no funciona?

Alexis88 · #4 (**permalink**) 12/08/2015, 17:19

No funciona porque .hover() es un método y no un evento, por eso no ocurre nada al colocar .on("hover"). Lo que debes de hacer es añadir los nuevos elementos a un contenedor, por ejemplo, un <div>, delegarle a este los eventos mouseover y mouseout y mediante la propiedad target del objeto del evento (event), tomar al elemento sobre el cual se está produciendo el evento, verificamos si posee la clase que hayamos asignado a los nuevos elementos y si es así, ejecutamos las instrucciones.

Código Javascript:

Ver original$("#id del contenedor")
    .on("mouseover", function(event){
        if (event.target.className == "foo"){
            $(event.target).css("background", "red");
        }
    })
    .on("mouseout", function(event){
        if (event.target.className == "foo"){
            $(event.target).css("background", "");
        }
    });

También puedes registrar ambos eventos a la vez y mediante la propiedad type del objeto del evento, detectas cuál de estos se produjo.

Código Javascript:

Ver original$("#id del contenedor")
    .on("mouseover mouseout", function(event){
        if (event.type == "mouseover" && event.target.className == "foo"){
            $(event.target).css("background", "red");
        }
 
        if (event.type == "mouseout" && event.target.className == "foo"){
            $(event.target).css("background", "");
        }
    });

Ambas formas te pueden servir para trabajar con otros eventos.

Saludos

kairosprod · #5 (**permalink**) 12/08/2015, 18:34

Muchas gracias Alexis88.
He usado

Código Javascript:

Ver original$(document).on({mouseenter: function () {
            $(this).find(".color").fadeIn(300);
        },mouseleave: function () {
            $(this).find(".color").fadeOut(300);
        }
    }, "div.caja");

te agradezco por tu disposición , doy por solucionado el tema.