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.