How to attach onclick event to an element dinamically created

Question

I'm trying to trigger an event attached to a html tag

This table is builded insde a function

    function detail(id){
      console.log(id)
    }

function search(data){
                $.post(url, {valorBusqueda: textoBusqueda}, function(data) {

                    data = JSON.parse(data);

                        $.each(data, function(i, val){

                                id = val.id;


                                html += '<tr onclick="detail('+id+')">';
                                html += '<tr>';
                            }
                        });      

                 }); 
}

But when I click the element I get this err:

Uncaught ReferenceError: detallePaciente is not defined

when is actually defined in my file

any idea how could I solve this?

Answer 1

Change this line:

html += '<tr class="clickedclass" data-id = "' + id + '">';

And make alert from this in Jquery:

$("body").on("click", ".clickedclass", function(){
  var id = $(this).attr("data-id");
  console.log(id);
});

Answer 2

You have a syntax error in your function declaration.

It should be:

function detail(data) {
...
}

Same error with the search function. Would need to see how you attach it to the click event to help with that.