Foros del Web » Programando para Internet » Javascript »

problemas con append

Estas en el tema de problemas con append en el foro de Javascript en Foros del Web. Hola amigos estoy trabajando un proyecto con Jquery y hago lo siguiente Código: //agregra un nuevo criterio de busqueda $("#searchbox a.addsearchcrit #searchcritmenu ul li").click(function(evento){ var ...
  #1 (permalink)  
Antiguo 28/04/2011, 10:19
 
Fecha de Ingreso: febrero-2010
Ubicación: La Habana,Cuba
Mensajes: 89
Antigüedad: 9 años, 3 meses
Puntos: 1
problemas con append

Hola amigos estoy trabajando un proyecto con Jquery
y hago lo siguiente
Código:
//agregra un nuevo criterio de busqueda
    $("#searchbox a.addsearchcrit #searchcritmenu ul li").click(function(evento){       
       
       var campo = $(this).text();
       
       //agregar un nuevo registro
       //$(".auxtable").append("<div class='rowcontent'><div class='cell50 borderB'><a href='#' class='delsearchcrit'></a><input type='text' value='"+campo+"' readonly='readonly'/></div><div class='cell50 borderB'><input type='text' name='1' value=''/></div></div>");       
      $(".auxtable").append("<div><a id='coco' href='#'>here coco</a></div>");
    });
    
    //eliminando criterio de busqueda
    $("#searchbox #coco").click(function(evento){
        evento.preventDefault();
                
        alert("hrer");        
    });
pero cuando le doy clic a los elementos creados dinamicamente no me hacen nada, que puede ser?
gracias
  #2 (permalink)  
Antiguo 28/04/2011, 12:47
Avatar de Hugo_Euan  
Fecha de Ingreso: abril-2011
Ubicación: Mérida, Yucatán, México
Mensajes: 193
Antigüedad: 8 años
Puntos: 71
Respuesta: problemas con append

ok, ya capte, jejeje.

Hola Miche, bueno, es simple, los eventos se registran al cargar el documento, por lo cual #coco no es un elemento valido cuando el interprete lo quiere registrar, no se si me explico.

el evento click de #coco se intenta registrar cuando #coco todavia no existe
Jquery te provee un metodo para registrar los eventos de objetos creados dinamicamente, por lo que tendrias que hacer lo siguiente.

Código Javascript:
Ver original
  1. $('#searchbox #coco').bind({
  2. click:function(evento){
  3. evento.preventDefault();
  4. alert("hrer");
  5. }
  6. });

el metodo bind registra las funciones para los elementos creados dinamicamente.

el codigo anterior debe ir en el momento que creas los objetos dinamicamente, por ejemplo:
Código HTML:
Ver original
  1. <div onclick='crear_objetos_dinamicamente();'>Crear objetos dinamicamente</div>
  2.     <div id='Contenedor'>Aqu&iacute; ver&aacute;s los objetos creados din&aacute;micamente></div>

y en el js tendrias:
Código Javascript:
Ver original
  1. function crear_objetos_dinamicamente(){
  2. //CREANDO LOS OBJETOS DINAMICAMENTE
  3. $('#Contenedor').append('<div id="searchbox">este es el search box</div><div id="coco">sOY el COCO JAJAJAJA</div>');
  4.  
  5. //REGISTRANDO LOS EVENTOS PARA LOS OBJETOS DINAMICAMENTE
  6. $('#searchbox #coco').bind({
  7. click:function(evento){
  8. evento.preventDefault();
  9. alert("hrer");
  10. }
  11. });
  12. }

de esta manera podras ejecutar los eventos de los objetos dinámicos. Intentalo y comentas, espero te sirva, EXITOO! !!!
  #3 (permalink)  
Antiguo 28/04/2011, 12:54
Avatar de livemusic  
Fecha de Ingreso: abril-2011
Ubicación: Lima - Chorrillos
Mensajes: 150
Antigüedad: 8 años
Puntos: 18
Respuesta: problemas con append

cuando integras un elemento despues de que el DOM este listo lo mejor es usar el metodo live xD.
que seria algo asi ::

$("#searchbox a.addsearchcrit #searchcritmenu ul li").live('click', function(evento){

var campo = $(this).text();

//agregar un nuevo registro
//$(".auxtable").append("<div class='rowcontent'><div class='cell50 borderB'><a href='#' class='delsearchcrit'></a><input type='text' value='"+campo+"' readonly='readonly'/></div><div class='cell50 borderB'><input type='text' name='1' value=''/></div></div>");
$(".auxtable").append("<div><a id='coco' href='#'>here coco</a></div>");
});

//eliminando criterio de busqueda
$("#searchbox #coco").live('click', function(evento){
alert("Live Music");
return false;
});


Me comentas si te funciono....
  #4 (permalink)  
Antiguo 28/04/2011, 14:02
 
Fecha de Ingreso: febrero-2010
Ubicación: La Habana,Cuba
Mensajes: 89
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: problemas con append

Muchas gracias no sabia del .live me parece genail aunqueno entiendo , luego buscare mas info en internet
muchas gracias a los dos
  #5 (permalink)  
Antiguo 28/04/2011, 16:17
Avatar de Hugo_Euan  
Fecha de Ingreso: abril-2011
Ubicación: Mérida, Yucatán, México
Mensajes: 193
Antigüedad: 8 años
Puntos: 71
Respuesta: problemas con append

Es correcto lo del live, lo que no me parece es que se intancia desde un principio y mientras no sea utilizado solo ocupa un lugar en la memoria, que aunque no es mucho pero por tecnias de la buena programación debe haber una buena estructuración, por eso en este caso recomendaria usar el metodo bind y no es por ser terco, jejeje, pero es mejor por el tipo de caso que se lleva

SALUDOS !!!

Etiquetas: append
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:23.