Evento click de button deja de funcionar cuando se actualiza el una sección de la pagina al usar ajax

publicado por: Anonymous

Estoy tratando de hacer un CRUD con Ajax usando la libreria jquery, en index.php muestro todos los registros de la BD, donde ademas le agrego un botón con clase “editar” a cada fila.

<div class="contenido">
  <table class="table">
    <thead class="active">
        <tr class="active">
          <th>Usuario</th>
          <th>Nombre</th>
          <th>Editar/Eliminar</th>
        </tr>
    </thead>
    <tbody class="contenido">
      <?php
      include 'usuarios.php'
      ?>
    </tbody>
  </table>
</div>

usuarios.php

while($usuario=mysqli_fetch_object($result)){
  echo "<tr>
  <td>$usuario->usuario</td>
  <td>$usuario->nombre</td>
  <td> <button id='$usuario->usuario' class='editar'>Editar</button></td></tr>";
}

cuando recién cargo la pagina el botón Editar me funciona correctamente, mostrándome el mensaje que tengo definido en el código javascript, pero una vez que hago uso del método para agregar un nuevo usuario mediante una ventana modal, los botones de editar dejan de funcionar y no muestran
mas el alert.

pienso que el detalle esta cuando se actualiza el DOM, cuando agrego un nuevo registro recargo el div container para visualizar el nuevo registro.

$('.contenido').load('usuarios.php');

este es mi codigo js

$(document).ready(function(){
    //funcion para registrar nuevo usuario
  $('#registrar').click(function(){
    var usuario = $("#usuario").val();
    var nombre_com = $("#nombre").val()+" "+$('#ape_pat').val()+" "+$('#ape_mat').val();

    $.ajax({
      type: 'POST',
      url: 'insert_usuarios.php',
      data: 'usuario='+usuario+'&nombre='+nombre_com,
      success: function(data){
        $('.contenido').load('usuarios.php');

      }
    });
  });

  $('.editar').click(function(){
    alert('Mensaje de prueba editar');
  });

});

solución

Amigo ese es un problema muy común cuando actualizas el DOM en vez de usar el evento click() de jquery usa el evento on() que como parámetro recibe otro evento.

cambia tu código

 $('.editar').click(function(){
   alert('Mensaje de prueba editar');
 });

por este a ver si te funciona

$(".contenido").on("click",".editar",function(){
  alert('Mensaje de prueba editar');
 });

El evento on() hace que se recorra de nuevo todo el html dentro de un objeto y así podemos usar el html dinámico que nos traemos después de rende rizar por primera vez la pagina.

Espero te ayude saludos.

Definición y uso

El método on () conecta uno o más controladores de eventos para los elementos seleccionados y elementos secundarios.

A partir de jQuery versión 1.7, el método on () es el nuevo reemplazo de los métodos bind (), live () y delegate (). Este método aporta mucha consistencia a la API, y recomendamos que utilice este método, ya que simplifica la base de código de jQuery.

Nota: Los manejadores de eventos adjuntos usando el método on () funcionarán para elementos actuales y FUTUROS (como un nuevo elemento creado por un script).

Consejo: Para eliminar manejadores de eventos, use el método off () .

Sugerencia: para adjuntar un evento que solo se ejecuta una vez y luego se elimina, use el método one () .


Sintaxis

$(selector).on(event,childSelector,data,function,map)

Fuente:www.w3schools.com

_x000D_

_x000D_

var root = 'https://jsonplaceholder.typicode.com';
$(".botonTraeHtml").click(function(){
$.ajax({
  url: root + '/posts/1',
  method: 'GET'
}).then(function(data) {
  $(".contenedorhtmlNuevo").html("<button class='btnClickNormal' type='button' name='button'>Boton dinamico con evento click normal</button><br><br><button class='btnClickOn' type='button' name='button'>Boton dinamico con evento On</button>")

});
})

//evento click normal que solo funciona con html no dinamico
$(".btnClickNormal").click(function(){
  alert("hola soy un boton traido dinamicamente")
})

//evento on click que funciona con cualquier html dinamico o no
$(".contenedorhtmlNuevo").on("click",".btnClickOn",function(){
  alert("hola soy un boton traido dinamicamente")
})

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="botonTraeHtml" type="button" name="button">Traer html dinamico</button>

<div class="contenedorhtmlNuevo">
    
  </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *