(jQuery) jQuery no me reconoce selectores de div cargados via ajax

[NiRVaNa] · #1 (**permalink**) 20/11/2008, 19:36

Hola gente...

Soy muy nuevo con esto de JavaScript y todavia no me manejo bien con jQuery.

El problema que tengo es el siguiente. al hacer un prueba sencilla de manejar un evento click de algun elemento, funciona correctamente si es parte de la pagina que se cargo inicialmente, pero... cuando cargo un div externo via ajax, dichos eventos no funcionan...

se entiende? Yo creo que es porque como inserta algo nuevo al html una vez que ya cargo lo demas, y como eso es nuevo, no se encuentra mapeado dentro del manejador... puede ser

Esta es mi funcion:

Código PHP:

  $(document).ready(function() {

$("a").click(function() {
        alert("Clickkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk");
    });

});

este es un ejemplo que hice para demostrar:

Código HTML:

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#busqueda").submit(function() {
			$("#inline_results").fadeOut("slow");
			$("#loading").fadeIn("fast");
			loadClientesResults();
			return false;
		});
		
		function loadClientesResults() {
			$("#inline_results").load(
				'index.html',{},
				function() { 
					$("#loading").fadeOut("fast");
					$("#inline_results").fadeIn("slow");
				}
			);
		}
		
		$("a").click(function() {
			alert("Click madafaca");
		});
	});
</script></head>
<body style="background: #f0f;">
<form action="" method="post" id="busqueda"><fieldset>
<legend>Busqueda</legend>
<a href="#">soy un link</a>
<input type="submit" value="cargar"/>
</fieldset></form></div>
<div id="loading" style="display: none; background: #ff0;">REALIZANDO BUSQUEDA</div>
<br/>
<div id="inline_results">fdgdfgdfgdfgdfg</div>
</div>
</body>
</html>

Tengo varios links en mi pagina, en todos funciona al hacer click, y uso un buscador, que carga los resultados en un div... los links que contiene ese div que se cargo no son reconocidos por el evento..

Si es que hace falta adjunto lo demas... ya que estoy trabajando con capas y es mucho codigo, que no creo que sea el origen del problema...

Espero que me puedan ayudar... Gracias..

stock · #2 (**permalink**) 20/11/2008, 23:16

en efecto, no funcionan porque son nuevos links, por lo tanto necesitas agregarles un listener a cada uno de ellos para que respondan al evento click:

Código PHP:

  function loadClientesResults() {
            $("#inline_results").load(
                'index.html',{},
                function() { 
                    $("#loading").fadeOut("fast");
                    $("#inline_results").fadeIn("slow");
///////////////////////////////////////
// Justo aqui necesitas agregarle el evento click a tus nuevos links
//////////////////////////////////////
                }
            );
        }

para agregar el click es igual, la única diferencia es que solo se lo agregas a los nuevos links ;)

Código PHP:

  $("#inline_results a").click(function() {
    alert("Click madafaca");
});

saludos

kurroman · #3 (**permalink**) 21/11/2008, 03:32

Puedes aplicar funciones a cualquier etiqueta, ya venga de AJAX o no usando este plugin:

http://brandonaaron.net/docs/livequery/

sebastiancb · #4 (**permalink**) 25/03/2010, 11:02

Yo tengo el mismp problema pero con formularios cargados via ajax con jquery, si tienen un ejemplo con formularios por favor diganme donde encuentro ejemplos con formularios y ese livequery

Dany_s · #5 (**permalink**) 25/03/2010, 13:10

jquery no maneja eventos en elementos creados dinamicamento en un futuro con append, prepend, etc y tampoco con ajax. Pero para eso está el evento live.

Esto NO funciona:

Código PHP:

  <html>
<head>
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        
        $('a').click( function (){
            alert ( $(this).text() );
        });
        $('body').append('<a href="#">No funciona</a>')
    });
    </script>
</head>
<body>
    <a href="#">Funciona</a>
</body>
</html>

Esto SI funciona:

Código HTML:

<html>
<head>
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        
        $('a').live('click', function (){
            alert ( $(this).text() );
        });
        $('body').append('<a href="#">No funciona</a>')
    });
    </script>
</head>
<body>
    <a href="#">Funciona</a>
</body>
</html>

El primer ejemplo que no funciona si cambian append antes del evento click va a funcionar

Por ajax si tienen una pagina que se llama pagina.html con un link

Código HTML:

<a href="#">link</a>

y llaman a esa página y con un evento click NO funciona

Código HTML:

<html>
<head>
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('body').load("pagina.html");
        
        $('a').click( function (){
            alert ( $(this).text() );
        });
        
    });
    </script>
</head>
<body>

</body>
</html>

Pero esto con evento live SI funciona

Código HTML:

<html>
<head>
    <title>Prueba</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $('body').load("pagina.html");
        
        $('a').live('click', function (){
            alert ( $(this).text() );
        });
        
    });
    </script>
</head>
<body>

</body>
</html>

jordan99 · #6 (**permalink**) 14/05/2010, 15:59

Cita:

Iniciado por sebastiancb

Yo tengo el mismp problema pero con formularios cargados via ajax con jquery, si tienen un ejemplo con formularios por favor diganme donde encuentro ejemplos con formularios y ese livequery

Si por favor, un ejemplo me estoy volviendo loco con esto . Pleaseeee

mayid · #7 (**permalink**) 14/05/2010, 17:14

No se si les sea util, pero estas usando plugins especificos para manejo de formularios?

Este por ejemplo:
http://jquery.malsup.com/form/
http://jquery.malsup.com/form/#ajaxForm