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!
.on
:$(document).on("click", seletor, function(){...
professional_list_card
é uma classe. Deveria usar um ponto.
antes e não#
, desta forma:$(document).on("click", ".professional_list_card", function(){...