¿Evento click no funciona dentro de un html agregado en tiempo de ejecución con JQuery?

publicado por: Anonymous

Mi consulta es la siguiente:

Estoy agregando un html dentro de mi pagina principal en tiempo de ejecucion con JQuery el cual lo creo y lo agrego con el siguiente codigo

function show_agent_add(obj_agent, div_cont){
    var div_bar;
    $.get("view/bar_agent.html", function(data){
        div_bar = $(data);
        div_bar.find(".agent-data").html(obj_agent._getFirstName());        
        return false;
    });

}

por otro lado a este elemento agregado quiere acceder a su evento click desde jquery pero al depurar este no lo reconoce.

function show_detail_agent(){
    $(".content-agents .bar-agent-content .bar_agent").on("click", function(){
        //$(this).next().toggle();
        console.log("prueba");
    });
}

dentro del html tengo una estructura creada a partir de un div con una clase llamada .bar_agent.

Quisiera saber cual es la forma correcta de acceder al evento.

solución

Puedes anexar el handler a document o a uno de los elementos de nivel superior que contengan el nuevo elemento, en efecto vas por la ruta correcta, si miras la documentación de .on() verás que acepta como segundo parámetro el selector que filtra los descendientes de los elementos que activan el evento:

$(document).on("click", ".content-agents .bar-agent-content .bar_agent", function(){
    //$(this).next().toggle();
    console.log("prueba");
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *