Página html:
<html>
<head>
</head>
<body>
<span id="resposta1"><a style="cursor:pointer" onclick="resposta(1)">Responder</a></span>
</body>
</head>
</html>
É o seguinte, tenho o esta função javascript que faz uma requisição ajax quando o meu link com a classe ".btn-resposta" é clicado:
$(document).ready(function(){
$(".btn-resposta").click(function(evt){
evt.preventDefault();
var idtop = $(".topico").attr("name");
var idpost = $(this).attr("name");
var texto = document.getElementById("textoresposta").value;
$.ajax({
type:"POST" ,
url:"lib/enviapost.php",
data:"idtop="+idtop+"&texto="+texto+"&idpost="+idpost,
beforeSend: function(){
},
success: function(data){
$(".posts").html(data);
}
});
});
});
O problema é que o meu link(botão) com está classe só é renderizado na tela dps que o usuário clica em outro link que chama uma função js que renderiza um código html com o meu botão:
function resposta(idpost) {
document.getElementById("resposta" + idpost).innerHTML =
' <textarea id="textresposta' + idpost + '" rows="1" name="resposta" cols="30" onkeydown="ver(' + idpost + ')"></textarea> ' +
' <a name="' + idpost + '" id="btnresposta' + idpost + '" type="submit" class="btn btn-success btn-sm btn-resposta">GO</a> ';
}
Como o meu botão é renderizado depois que a página é carregada, não sei como fazer pra minha função js ajax capturar o evento deste botão quando ele aparece. Alguém tem alguma solução para este problema?!