Controlling html dynamically inserted by javascript

Question

I generate a professional card HTML with JavaScript:

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 it with HTML Directly the click function of jQuery work fine:

$(".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 with JavaScript the function click of jQuery not work. Then i tried make a function and use onclick, not work too:

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

How i control the HTML inserted with JavaScript? Click and Other Events?

Thank You!

score 0 · Answer 1 · answered Jul 12 '18 at 09:05

0

For this you need to delegate the click event to a DOM element.

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

answered Jul 12 '18 at 09:05

Daan

2,680
20
39

https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Zakaria Acharki Jul 12 '18 at 09:05
I tried your code, not work too... – Claudio Vales Barcellos Junior Jul 12 '18 at 09:17
I have no HTML to test with. – Daan Jul 12 '18 at 09:21
The object does not support the 'apply' property or method – Claudio Vales Barcellos Junior Jul 12 '18 at 09:35

Controlling html dynamically inserted by javascript

1 Answers1