problemas JQuery con .click() .blur() .prepend()

gadowks · #1 (**permalink**) 02/09/2010, 08:38

Saludos Aficionados y WebMasters.
Tengo un dificil problema el cual aparenta ser sencillo, es con los metodos .blur() y .click() del JQuery, no puedo utilizar el metodo .blur() en una caja de texto ensertada por jquery, mediante el evento .click() de un div ( div id="add" div ), inserto mi input con el metodo .prepend(), y le aplico luego un .blur() al input para que aparesca una alert("") cuando pierda el foco. haber si hay un Capo en Jquery podria darme una solucion.

les adelanto que el metodo .blur() si funciona con todas las variantes que se pueda hacer para insertarlo, menos cuando lo insertas mediante un .click().

::::::::: Un link para que veas el ejemplo en ejecucion :::::::::::::

http://gadowks.net/bug_jquery/bug_append_blur.html

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<title>mi bug</title>
</head>
<body>

<div id="add" style="width:20px;height:20px;background-color:#930"></div>

<div id="contenido">
</div>


</body>
<script type="text/javascript" >
$(document).ready(function(){
	//insertando input por Jquery
	$("#add").click(function(){
		$('#contenido').prepend("<input name='cajita' id='caita'>");
	});
		



	$('input').blur( function() {
			var valor= $(this).attr('value');				  
			alert('evento Blur  y '+valor);
	});
	
	
	
})		 
</script>
</html>

kokoou · #2 (**permalink**) 02/09/2010, 09:27

El problema es que ingresas el input mediante un click, y el evento blur lo asignas en el document ready cuando el elemento todavía no existe.

Solución:

Código Javascript:

Ver original<script type="text/javascript">
  $(document).ready(function(){
    //insertando input por Jquery
    $("#add").click(function(){
      $('#contenido').prepend("<input name='cajita' id='cajita' onblur='showValue()'>");
    });
  }); // end ready
 
  showValue = function() {
    var valor= $('#cajita').attr('value');                
    alert('evento Blur  y '+valor);
  });
</script>

caricatos · #3 (**permalink**) 02/09/2010, 10:18

Tema movido desde javascript

tredio · #4 (**permalink**) 02/09/2010, 11:35

como te explicaron anteriormente eso pasa por que has definido el evento antes de que el elemento haya sido creado por eso no te responde, para solucionar eso puedes usar la funcion live() de jquery, te quedaria algo asi:

Código Javascript:

Ver original<script type="text/javascript" >
$(document).ready(function(){
    //insertando input por Jquery
    $("#add").click(function(){
        $('#contenido').prepend("<input name='cajita' id='caita'>");
    });
        
 
 
 
    $('input').live('blur', function() {
            var valor= $(this).attr('value');                 
            alert('evento Blur  y '+valor);
    });
    
    
    
})       
</script>

para mas info sobre esa funcion consulta la API de jquery.