JS does not identify rendered class after the page loads?

Question

JS does not identify rendered class after the page loads?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

html page:

<html>
  <head>
    
    </head>
  <body>

<span id="resposta1"><a style="cursor:pointer" onclick="resposta(1)">Responder</a></span>
    
    
    </body>
  </head>
</html>

It is as follows, I have the this javascript function that makes an ajax request when my link with the ".btn-response" class is clicked:

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

The problem is that my link with this class is only rendered on the dps screen that the user clicks on another link that calls a js function that renders an html code with my button:

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> ';
}

As my button is rendered after the page loads, I do not know how to do it for my js ajax function to capture the event of this button when it appears. Does anyone have any solutions to this problem?!

javascript ajax

asked by anonymous 18.10.2015 / 01:43

2 answers

Send email with tamplate codeigniter Java cast and convert

score 1 · Answer 1

The problem here is delegation. You need to add this event dropper to an element that already exists on the page (and be the ancestor of the button) when jQuery is read and then delegate to the element / class you need.

Then when jQuery receives the event on this element that was already on the page it will check if the event came from this element that you passed in the delegation argument.

So it changes:

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

for

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

You can read more here about this: link

score 0 · Answer 2

I was able to solve the problem by doing the following:

Instead of using the .ready () event in the document, I created a function where I threw this function into the "onclick" event of my buttons, including what was rendered by my response () function. Then I had another problem, because my response function besides a button, also rendered one. When I fired my function on this button it could not get the content because it was not part of the DOM. Then at the time of rendering the in the call of my response () function. I threw it straight into the code with the display style: none. Then you just use jquery's .show method when the answer () function is called.

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><linkrel="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>