0

Eu gerei um cartão de profissionais HTML com JavaScript. A lista é populada após clicar na categoria:

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);

Quando eu populo diretamente no HTML funciona normal:

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

Mas quando eu insiro os elementos HTML dinamicamente a função click não funciona. Então, eu tentei a função onclick, não funciona também:

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

*Tentei também colocar on como sugerido no comentário, também não funciona:

$("#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');
    });

Também tentei:

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

Nos 2 Casos acima da o erro: HierarchyRequestError

Como eu posso controlar o HTML inserido dinamicamente com JavaScript? O Evento click e outros eventos?

RESOLVIDO POR OSMOSE NOVAMENTE!!!

Coloquei:

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

No Lugar de:

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

E Resolveu!

"GRATO"

Obrigado!

7
  • Conforme o link marcado, use o método .on: $(document).on("click", seletor, function(){...
    – Meu ovo
    12/07/2018 às 19:16
  • eu fiz isso, não funciona também! 12/07/2018 às 19:48
  • HierarchyRequestError 12/07/2018 às 19:52
  • 1
    Esse professional_list_card é uma classe. Deveria usar um ponto . antes e não #, desta forma: $(document).on("click", ".professional_list_card", function(){...
    – Meu ovo
    12/07/2018 às 20:03
  • desculpe, é que colei do código anterior.. mas já tem id com ele e da o erro de hierarquia também! resolvi usando $('div#professionals_list').append(professionalsCards); no lugar de $("div#professionals_list").html(professionalsCards); GRATO! 12/07/2018 às 20:11

0

Pesquise outras perguntas com a tag .