How to control events of dynamically inserted HTML elements later

Question

I generated a professional HTML card with Javascript. The list is populated after clicking on the category:

var professionalsCards = '';
$.each(professionalsData, function(i, item)
{
    professionalsCards += '<div class="col-md-3 professional_list_card">';
    professionalsCards += '<a href="#" onclick="showProfessionalDetails()">';
    professionalsCards += '<div class = "panel panel-default professional_list_panel">';
    professionalsCards += '<img src="'+websiteTPL+'images/user-without-avatar-400x400.jpg" height="75px" width="75px" alt="..." class="img-circle center-block" />';
    professionalsCards += '<h4 class="text-center">'+item.fullname+'</h4>';
    professionalsCards += '<input type="hidden" id="professional_uuid" name="professional_uuid" value="teste" />';
    professionalsCards += '</div></a></div>';
});

$("div#professionals_list").html(professionalsCards);

When I populate directly in HTML works normal:

$(".professional_list_card").click(function(event)
{
    event.preventDefault();
    var professional_uuid = jQuery(this).find("input:hidden");
    alert(professional_uuid.val());
});

But when I insert the HTML elements dynamically the click function does not work. So I tried the onclick function, it doesn’t work either:

function showProfessionalDetails()
{
    var professional_uuid = jQuery(this).find("input:hidden");
    alert(professional_uuid.val());
}

*I also tried to put on as suggested in the comment, also does not work:

$("#professionals_list").on("click", "#professional_list_card").click(function(event)
    {
        //event.preventDefault();
        //var professional_uuid = jQuery(this).find("input:hidden");
        //alert(professional_uuid.val());
        alert('Teste');
    });

I also tried to:

$(document).on("click", "#professional_list_card", function()
    {
        //event.preventDefault();
        //var professional_uuid = jQuery(this).find("input:hidden");
        //alert(professional_uuid.val());
        alert('Teste');
    });

In 2 cases above the error: Hierarchyrequesterror

How can I control the dynamically inserted HTML with Javascript? The Event click and other events?

SOLVED BY OSMOSIS AGAIN!!!

Placed:

$('div#professionals_list').append(professionalsCards);

Instead of:

$("div#professionals_list").html(professionalsCards);

And Resolved!

"GRATEFUL"

Thank you!