0

Hola amigos miren tengo una funcion ajax que al cargar la pagina me trae unos datos del servidor y con esos datos genero el HTML y lo coloco en un div algo simple, mi problema es que quiero capturar un evento con jquery de un elemento generado en esa funcion y simplemente no pasa nada de la unica manera que me deja hacerlo es agregando le atributo onclick al elemento en el html y yo no quiero hacerlo asi porque los parametros que le paso a la funcion no quiero que sean visibles del lado del cliente..

voy a dar un ejemplo del codigo no voy a poner el original ya que es muy largo.

$(function(){
//llamo a la funcion
listar();

// esto no me funciona
$('.element').on('click',fuction(){

  alert('hizo click');
 })
});


function listar(){
 html=''
 $.ajax({
  //trraigo lso datos del servidor
  success:function(datos){
    html=generateHTML(datos);
    $(div).html(html);
  }
 })
}

function generateHTML(datos){
html='';
html+='<elemento class="element">'+datos+'</elemento>';
return html;
}

para que funcione tendria que hacer algo asi

  function generateHTML(datos){
 html='';
 html+='<elemento class="element"  onclick="haceralgo(params)">'+datos+'</elemento>';
 return html;
}

function haceralgo(params){
//hago algo
}

me gustaria poder hacerlo de la orta manera alguno sabe porque pasa esto?.. yo pense que tiene que ver algo con el orden de lectura del documento del navegador o algo asi.

5
  • Por curiosidad: ¿porque llamas un tag de html <elemento>? asi es como lo tienes en tu html el 21 may. 2019 a las 2:09
  • por curiosidad leiste aunque sea el post?
    – user114682
    el 21 may. 2019 a las 2:51
  • Si lo leí, solo preguntaba... No eres el primero que formula una pregunta que coloca un tag de html que no existe el cual era el problema. Te suguiero que para la proxima tome en cuanta ejemplo mínimo verificable. el 21 may. 2019 a las 12:51
  • Por cierto tu problema se resolvia con: $(document).on('click', '.element', function() { ... }); sin necesidad de asignar el evento por cada success del ajax. el 21 may. 2019 a las 12:54
  • bueno amigo pero esta claro que es una referencia..... y no el codigo real yo creo que es bastante entendible el contexto de la pregunta y no tiene nada que ver con etiquetas html igual se aprecia tu respuesta gracias
    – user114682
    el 21 may. 2019 a las 16:32

1 respuesta 1

1

Es exactamente lo que comentas, el orden de lectura de tu archivo .js es importante, lo que es más importante todavía es el flujo.

Indicas que al cargarse el documento (con la función ready de javascript) se ejecute la función listar y además asignas eventos a unos elementos del documento, el tema es que la función listar hace una petición ajax y ésta es asíncrona y es por ello que aunque haces primero el llamado a la función listar y luego la asignación de los eventos ésto no quiere decir que se ejecuten en ese orden.

Cuando indicas que haces la petición ajax ésta retorna una promesa, misma que ejecutará la función que le indicas en el atributo succes cuando (ojo con esto) la petición sea respondida y sea exitosa, eso quiere decir que puede tardar un tiempo en ser completada (dependiendo de la velocidad de internet, el tamaño de la data, etc..) por lo cual el flujo así como lo tienes es que se ejecuta la función listar, se deja la petición allí ejecutandose y se ejecuta la asignación de los eventos, como en ese momento la petición no ha terminado y no se ha ejecutado la función que pasaste en succes, entonces no existen "elementos" en el html.

La solución es pasar el proceso de asignación de los eventos cuando la petición sea respondida, es decir dentro de la función que pasas en succes:

function listar(){
 html=''
 $.ajax({
  //trraigo lso datos del servidor
  success:function(datos){
    html=generateHTML(datos);
    $(div).html(html);

    //acá se asignan los eventos ya que sabemos que estan creados los elementos en el html
    $('.element').on('click',fuction(){
      alert('hizo click');
    });
  }
 })
}
1
  • Ahhhhhh okey amigo gracias por la respuesta voy a checkear aver que tal gracias amigo ^^
    – user114682
    el 21 may. 2019 a las 2:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.