JS does not identify rendered class after loading the page?

Asked

Viewed 835 times

0

Html page:

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

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

The following is, I have this javascript function that makes an ajax request when my link with class ". btn-reply" 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(button) 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 is loaded, I don’t know how to make my js ajax function capture the event from this button when it appears. Does anyone have any solution to this problem?!

javascript ajax

  • Place the code instead of the image.

  • When you click on this other link that renders this button, you came to use the browser feature of inspecting code to check if the html of the button was inserted into the skeleton of the page?

  • Yes, I inspected it. The code is usually embedded into the page skeleton.

  • Related: http://answall.com/questions/23970

2 answers

1

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

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

Thus changes:

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

for 

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

You can read more about it here: /a/5199/129

0

I managed to solve the problem by doing the following:

Instead of using the event. ready() in Document, I created a function where I played this function in the "onclick" event of my buttons, including what was rendered by my response function(). Then I had another problem, because my answer function besides a button, also rendered a . When I triggered my function on that button she couldn’t get the contents of because she wasn’t part of the DOM either. So instead of rendering it in the call of my response function(). I played it straight into the code with the display:None style. Then just use the jquery’s . show method when the response() 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>
  <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>

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.