referirce a elementos cargados dinamicamente

Citar

Escrito el 04 Abr 2013 05:23 pm

Hola, una duda alguien sabe como es posible referirce a elementos cargados dinamicamente, ya lo intente con jquery con ".on",".bind" , etc. pero estos solo responden a eventos

Hay alguna forma en la que pueda referirme a ellos sin un evento??

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 05 Abr 2013 12:29 pm

Con un selector....

Por SinSemilla

Claber

336 de clabLevel

Genero:Masculino

Envíale un mensaje privado

i am that i am...

Citar

Escrito el 05 Abr 2013 12:32 pm

Con los selectores de toda la vida.

De verdad que a veces no entiendo lo que estás preguntando...

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 05 Abr 2013 03:29 pm

jajajajaj perdon, los selectores comunes no te permiten referirte a elementos cargados dinamicamente, imagino que alguna vez usaste jquery.htm() o algo asi, el contenido que no se encuentra en el dom a la hora de carga no se reconoce como tal si no has la prueba

crea un html
<div class="prueba">

</div>

y en css con javascript coloca algo como esto:
$('.prueba').html('<div class="nuevo"'>contenido</div>')

y ahora trata de comprovar el valor de nuevo y veras que no te lo permite no te lo reconoce
alert($('nuevo').html())

Para eventos como click, mouseenter, etc.. estan las funciones .on, .delegate, .live etc..
las que te permiten te refieras al elemento dinamico cuando hay un evento

Mi pregunta va dirijida a si alguien sabe como hacerlo sin eventos es decir que puedas crear contenido dinamico y referirte a el, hablando del ejemplo que puse que cuando despliegues con alert $('nuevo').html() te despliegue contenido y no undefinned

No se si me explique bien??
Quisas la confucion se dio en que cuando puse referirce a elementos cargados dinamicamente no especifique, que quiero manipularlos con jquery, y javascript, sin disparar eventos.

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 05 Abr 2013 04:29 pm

Lo lamento pero estás equivocado.

Pero primero debo advertirte que tienes un error en tu código: Cuando haces $('nuevo'), quieres referirte a los elementos con la clase 'nuevo', pero te falta el punto en el selector: $('.nuevo')

Para demostrar que es posible referirse a elementos creados dinámicamente, estudia este código:

Código HTML :

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Plantilla</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var ind = 3;
function UltimoLi() {
   alert($("#lista li").last().html());
   return false;
}
function AgregarMasLi() {
   ind++;
   $("#lista").append('<li>Item '+ind+'</li>');
   return false;
}
</script>
</head>
<body>
<ul id="lista">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>
<p><a href="" onClick="return UltimoLi();">Ver el último LI</a> <a href="" onClick="return AgregarMasLi();">Agregar más LI</a></p>
</body>
</html>

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 05 Abr 2013 04:38 pm

Aunque ahora que lo pienso, creo que el problema que tienes es que quieres tomar el contenido de un elemento por su clase.

Pero debes tener en cuenta que cuando el selector devuelve más de un elemento, el método .html() de JQuery te devuelve el contenido del primero de ellos, no del último (ni mucho menos de todos).

Básandome en el código ejemplo anterior:

Código HTML :

<script type="text/javascript">
var ind = 3;
function UltimoLi() {
   alert($(".item").html()); <!-- atento a esta línea -->
   return false;
}
function AgregarMasLi() {
   ind++;
   $("#lista").append('<li class="item">Item '+ind+'</li>');
   return false;
}
</script>
</head>
<body>
<ul id="lista">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
</ul>
<p><a href="" onClick="return UltimoLi();">Ver el último LI</a> <a href="" onClick="return AgregarMasLi();">Agregar más LI</a></p>

En el alert mostrará "Item 1". Pero si se cambia la línea marcada por:

Código Javascript :

alert($(".item").last().html());

Mostrará "Item 3" (o el número de item que corresponda al último).

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 05 Abr 2013 05:18 pm

Otra cosa es que NO es lo mismo cargar el script antes de tu contenido dinamico, que despues de tu contenido dinamico.

eso lo aprendi viendo este ejemplo de Jquery, cuando lo pones antes (por ejemplo entre <head> no pitufa por alguna razón fuera de mi comprensión.

Código :

<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
var count = 0;
$("body").on("click", "p", function(){
$(this).after("<p>Another paragraph! "+(++count)+"</p>");
});
</script>
</body>
</html>

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

FullStack Web Developer

@elporfirio

Citar

Escrito el 06 Abr 2013 05:16 pm

esto sucede por que el navegador "lee" y ejecuta el documento de arriba hacia abajo, si cuando llega al script, no ha leído ninguna etiqueta html, entonces es como si no existiera en ese momento, por lo tanto el script no puede interactuar aún con el DOM, en caso de cargar contenido dinámico, hay que hacer la selección con jquery después de cargar los elementos, la manera más sencilla es utilizando las funciones callback que tienen los métodos que trabajan con ajax.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

Citar

Escrito el 08 Abr 2013 08:26 pm

Si. de echo lo entiendo casi igual que tu, mi unica duda y origen de mi pregunta es si hay forma de hacerlo sin algun evento, porque las unicas formas que conosco de referirme a eventos cargados dinamicamente es con eventos como click, mouseenter, etc..

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Citar

Escrito el 09 Abr 2013 12:12 am

En ese caso la respuesta a la pregunta inicialmente formulada es no, pero la forma de solucionarlo es como lo dije en mi anterior post, haciendo la selección después de cargar los elementos utilizando callbacks, un ejemplo sencillo:

Código Javascript :

$('#result').load('ajax/test.html', function() {
  $('.elemento_nuevo').css('color', '#fff');
});

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

Citar

Escrito el 09 Abr 2013 06:47 pm

ajaaaa no lo he probado pero suena muy logico, parece que si es eso lo que requeria apenas tenga tiempo lo pruebo y les comento que tal me fue

Por rod00x3

Claber

595 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

referirce a elementos cargados dinamicamente

Escribe una respuesta rapida