Jquery stops working after running the load command

Question

I’m using the remote

$("#teste").load(location.href+" #teste>*",{id : idd});

The command updates the data div group and send a parâmetro for the same. The div, has class, commands jquery that interacts with the user. When loading the screen after the execution of the command, and if the above command is again executed, the jquery, styles, etc no longer work.

Example:

HTML:

<div id="teste">
    <input type="button" value="Clique aqui para Apagar o Resgistro 1" class="btn">Registro 1
    <input type="button" value="Clique aqui para Apagar o Resgistro 10" class="btn">
    <input type="button" value="Clique aqui para Apagar o Resgistro 20" class="btn">
</div>

Clicking on a button executes the code below.

JS:

function() {
      $.ajax({
        url: "Registros.php",
        data: {ta : tipoacao, dados : dados},
        type: "POST"
      })
      .done(function(data) {           
        $("#teste").load(location.href+" #teste>*",{id : ta});

      })
      .error(function(data) {        
      });
    });

Resultado (clicou para apagar o Registro 1)
<div id="teste">    
    <input type="button" value="Clique aqui para Apagar o Resgistro 10" class="btn">
    <input type="button" value="Clique aqui para Apagar o Resgistro 20" class="btn">
</div>

Shows without record 1, but when clicking again on some button no longer calls the ajax, no more style on the button.

Answer 1

This is because you remade the GIFT, and the events were not tied to the elements after the new GIFT was created. Utilize Event delegate

$('body').on('click', '.sua-class', function() {
   //...
});