Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/08/2015, 14:35
kairosprod
 
Fecha de Ingreso: julio-2010
Mensajes: 11
Antigüedad: 14 años, 4 meses
Puntos: 1
Exclamación No funciona eventos .hover() y .click() de pagina cargada mediante $.ajax

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.