Tengo esta aplicación en Laravel 6 y trato de agregar x-editable a una lista de Suscriptores de eventos, por lo que puedo editar estos registros de suscriptores sin redirigir a otra página/ruta, usando solo x-editable en línea y Ajax para actualizar los datos. Pero estoy generando esta lista modal usando Ajax.

Aquí está el código javascript:

 <script> $('.openModal').on('click', function(){ var id = $(this).data('id'); var table = $("#subscribers"); table.html(''); $.ajax({ type: 'GET', url: '/participantes/' + id, success: function(data){ $("#subscribersModal").modal("show"); table.append('<tr><th>' + "Nome" + '</th><th>' + "Email" + '</th><th>' + "Ações" + '</th></tr>'); data.forEach(function(row){ var isGenerated = row.certified_generated === 1 ? '<span class="badge badge-success">Gerado</span>' : '<span class="badge badge-danger">Não gerado</span>'; var isValidated = row.already_validation_code !== null ? '<span class="badge badge-info">Validado</span>' : '<span class="badge badge-danger">Não validado</span>'; var generateButton = row.certified_generated === 1 ? '' : '<button class="btn generate-sub" title="Gerar certificado"><i class="fa fa-refresh" aria-hidden="true"></i></button>'; var editUrl = '{{route("evento.update-participante", ":id") }}'; editUrl = editUrl.replace(':id', row.id); table.append('<tr><td><a class="xedit" data-type="text" data-pk="'+ row.id + '" data-title="Edit">' + row.name + '</a><br>' + isGenerated + isValidated + '</td><td>' + row.email + '</td><td>'+ '<a href="'+ editUrl +'" title="Editar registro"><i class="fa fa-pencil" aria-hidden="true"></i></a>' + generateButton + '</td></tr>'); }); } }) });

Código Javascript x-editable

 <script> $.fn.editable.defaults.mode = 'inline'; $(document).ready(function() { $('.xedit').editable(); }); </script>

Primero pensé que era un problema de import js/css CDN, pero luego pruebo con los datos que provienen directamente del motor blade y también funciona.

No tengo idea de por qué sucede esto, ¿alguien podría ayudar?