problemas con append

[miche23]

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

[Hugo_Euan]

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:

$('#searchbox #coco').bind({
click:function(evento){
evento.preventDefault();
alert("hrer");
}
});
 

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:

<div onclick='crear_objetos_dinamicamente();'>Crear objetos dinamicamente</div>
    <div id='Contenedor'>Aqu&iacute; ver&aacute;s los objetos creados din&aacute;micamente></div>
 

y en el js tendrias:

Código Javascript:

function crear_objetos_dinamicamente(){
//CREANDO LOS OBJETOS DINAMICAMENTE
$('#Contenedor').append('<div id="searchbox">este es el search box</div><div id="coco">sOY el COCO JAJAJAJA</div>');
 
//REGISTRANDO LOS EVENTOS PARA LOS OBJETOS DINAMICAMENTE
$('#searchbox #coco').bind({
click:function(evento){
evento.preventDefault();
alert("hrer");
}
});
}
 

de esta manera podras ejecutar los eventos de los objetos dinámicos. Intentalo y comentas, espero te sirva, EXITOO! !!!

[livemusic]

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....

[miche23]

Muchas gracias no sabia del .live me parece genail aunqueno entiendo , luego buscare mas info en internet
muchas gracias a los dos

[Hugo_Euan]

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 !!!