Estoy enviando una solicitud a una API y estoy obteniendo todos los datos y mapeándolos en una tabla y al mismo tiempo mostrando un botón para cada fila y estoy agregando al botón una ID que proviene de los datos. El problema es que cuando le doy al botón una ID, digamos eliminar y crear una función para disparar al hacer clic en el botón, no sucede nada, ni siquiera registra que se ha hecho clic y debajo está el código:

 $(document).ready(function () { $("#documentsDatatable").DataTable({ "processing": true, "serverSide": true, "filter": true, "ajax": { "url": 'https://localhost:44389/api/Document/Group', "type": "POST", "data": {id: 90}, "datatype": "json" }, "columnDefs": [{ "targets": [0], "visible": false, "searchable": false }], "columns": [ { "data": "name", "name": "Name", "autoWidth": true }, { "data": "name", "name": "Document", "autoWidth": true }, { data: "created_at", "render": function (value) { if (value === null) return ""; return moment(value).format('DD/MM/YYYY'); } }, { "render": function (data, type, full, meta) { return "<button value='" + full.id + "' id='remove' class='btn btn-danger'><i class='fas fa-minus-circle'></i> Remove from Group</button>"; } }, ] }); });

Aquí está la función que debería activarse:

 $('#remove').on('click', function (e) { $.ajax({ type: 'POST', url: "https://localhost:44389/api/Group/Remove", data: {id: 4, group: 46}, dataType: 'json', success: function (data) { //console.log('success', data); }, }); e.preventDefault(); });

El código anterior ni siquiera activa la función, pero cuando creo un botón aleatorio como el que se muestra a continuación y reemplazo la ID con la de este botón, el código funciona perfectamente. ¿Alguien sabe cuál es el problema?

 <button id="trial" value="50">Click me</button>