0

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?!

4
  • Coloque o código ao invés da imagem.
    – DaviAragao
    17/10/2015 às 23:52
  • Quando você clica neste outro link que renderiza este botão, chegou a utilizar o recurso do navegador de inspecionar código para verificar se o html do botão foi inserido no esqueleto da página? 18/10/2015 às 0:24
  • Sim, inspecionei. O código é incorporado normalmente ao esqueleto da página. 18/10/2015 às 2:45
  • Relacionado: pt.stackoverflow.com/questions/23970
    – ptkato
    18/10/2015 às 2:49

2 Respostas 2

1

O problema aqui é de delegação. Tens de adicionar esse oscultador de evento a um elemento que já exista na página (e seja ancestral do button) quando o jQuery é lido e depois delegar no elemento/classe que precisas.

Aí quando o jQuery recebe o evento nesse elemento que já estava na página ele vai verificar se o evento veio desse elemento que passaste no argumento de delegação.

Assim muda:

$(".btn-resposta").click(function(evt){

para

$(document).on("click", ".btn-resposta", function(evt){

Podes ler mais aqui sobre isto: https://pt.stackoverflow.com/a/5199/129

0

Consegui resolver o problema fazendo o seguinte:

Em vez de utilizar o evento .ready() no document, eu criei uma função aonde eu joguei essa função no evento "onclick" dos meus botões, inclusive no que era renderizado pela minha função resposta(). Daí passei a ter outro problema, porque a minha função resposta além de um botão, renderizava também uma . Quando eu disparava minha função nesse botão ela não conseguia pegar o conteúdo da porque ela também não fazia parte do DOM. Então ao vez de renderizar a na chamada da minha função resposta(). Eu joguei ela direto no código com o estilo display:none. Depois foi só utilizar o método .show do jquery na quando a função resposta() for chamada.

function resposta(idpost) {
  document.getElementById("resposta" + idpost).innerHTML =
    '<a onclick="enviarResposta(' + idpost + ')" " id="btnresposta' + idpost + '" type="submit" class="btn btn-success btn-sm btnresposta">GO</a> ';
  $("#textoresposta" + idpost).show();
}

function enviarResposta(post) {

  
  var texto = document.getElementById("textoresposta" + post).value;
  
  console.log(texto);
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
</head>

<body>

  <span id="resposta1"><a style="cursor:pointer" onclick="resposta(1)">Responder</a></span>
  <textarea style="display:none;" id="textoresposta1" rows="1" cols="30"></textarea>
  <div id="result">
  <span></span>
    </div>

</body>

</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .