Jquery stops working after running the load command

0

I'm using the

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

The command updates the data div group and sends parâmetro to it. The div , has class, jquery commands that interact with the user. When loading the screen after executing the command, and if it is to execute the above command again, jquery , styles, etc do not work anymore.

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 any button runs 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>

Show without record 1, but clicking a button again no longer calls ajax, you do not have the button style anymore.

    
asked by anonymous 18.12.2015 / 18:28

1 answer

1

That's because you remade the DOM, and events were not tied to the elements after the new DOM was created. Use event delegate

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