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