2

Estoy tratando de hacer un CRUD con ajax y a la hora de mostrar los resultados de una consulta genero una tabla con dichos resultados recibidos a través de json desde php, el problema es que al generar la tabla, al final de cada fila coloco dos botones uno para llamar a una función javascript para eliminar ese artículo y otro para editarlo. El problemea es que al querer ejecutar la función con el evento click en jquery, este no llama a la función.

Código para generar la tabla

var registros_sql = JSON.parse(resultados);
var tabla = "";

for(var i in registros_sql){

    tabla += `<tr>
                <th scope='row'>${registros_sql[i].CODIGOARTICULO}</th>
                <td>${registros_sql[i].SECCION}</td>
                <td>${registros_sql[i].NOMBREARTICULO}</td>
                <td>${registros_sql[i].PRECIO}</td>
                <td>${registros_sql[i].PAISDEORIGEN}</td>
                <td>
                    <button class='btn_llamar_editar' style='width: 40px;' data-id='${registros_sql[i].CODIGOARTICULO}'><i class='fas fa-edit'></i></button>
                    <button class='btn_llamar_eliminar' style='width: 40px;' data-id='${registros_sql[i].CODIGOARTICULO}'><i class='fas fa-times'></i></button>
                </td>
            </tr>`;
}

$("#insercion").html(tabla);    

})

Código para asignarle un evento a los botones

$(".btn_llamar_eliminar").on("click", function(){

    var articulo = $(this).attr("data-id");

    eliminar_productos(articulo);
});

Función eliminar_productos

function eliminar_productos(id_producto){

    alert("El producto a eliminar es: " + id_producto);

}

Lo que no entiendo es porque en los botones que se generan dinamicamente no funciona, pero si yo voy directo al html y creo un botón con la clase btn_llamar_eliminar, el evento si se ejecuta.

1 respuesta 1

2

Hice un ejemplo para mostrar la solución al problema, hice una tabla dinámica y se genera en el div #insercion:

$("button#table").on("click", function() {

var tabla = "<table id='dinamic'>";

for (var i=0; i<10; i++) {
  tabla += "<tr><th scope='row'>HEAD</th><td><button class='btn_llamar_editar' style='width: 40px;' data-id='"+i+"'><i class='fas fa-edit'></i></button><button class='btn_llamar_eliminar' style='width: 40px;' data-id='"+i+"'><i class='fas fa-times'></i></button></td></tr>";
}
tabla += "</table>";
$("#insercion").html(tabla);

});

$("#insercion").on("click",".btn_llamar_editar", function() {
  var articulo = $(this).attr("data-id");
  alert("El producto a editar es: " + articulo);
});

$("#insercion").on("click",".btn_llamar_eliminar", function() {
  var articulo = $(this).attr("data-id");
  eliminar_productos(articulo);
});


function eliminar_productos(id_producto) {

    alert("El producto a eliminar es: " + id_producto);

  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="table">crear tabla</button>
<div id='insercion'></div>

Cuando añado el evento click, el selector apunta al div #insercion y en el parámetro del click agrego el botón creado dinamicamente en la tabla. De esta manera sí funciona.

Al utilizar on(), los eventos delegados tienen la ventaja de que pueden procesar eventos de elementos descendientes que se agregan al documento en un momento posterior.

1
  • Gracias crack!, la explicación me sirvió a la perfección para entenderlo. Commented el 21 mar. 2018 a las 0:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.