Estoy desarrollando una vista donde se muestra una tabla con varios datos, estos se cargan de una base de datos.
En cada fila hay 2 botones que al presionarlos actualizan un dato de una fila.
El problema es que después de hacer esa actualización el botón deja de funcionar.
También tengo un campo y un botón que buscan una fila por el id. Después de hacer esa búsqueda, carga todo normal pero los botones que están dentro de la fila dejan de funcionar también...por qué pasa esto?
Aquí mi Vista:
<div class="form-row justify-content-center">
<label>Nro. de Registro</label>
<input class="form-control" type="text" name="" id="NroRegistro">
</div>
<div class="col-md-2 d-md-flex align-items-end">
<a href="javascript:;" class="btn btn-primary m-btn m-btn--icon" id="Buscar">
<span><i class="la la-search"></i>
<span>Buscar</span>
</span>
</a>
</div>
<div class="row mt-5">
<div class="table-responsive text-center">
<table class="table table-sm table-bordered" id="tabla">
<thead class="thead-dark">
<tr>
<th scope="col">Nro. de Registro</th>
<th scope="col">Fecha Derivacion</th>
<th scope="col">Procedencia</th>
</tr>
</thead>
<tbody id="table-body">
@foreach($documentos as $d)
@if($d->IdDestinoOficina!='')
@if(auth()->user()->IdOficina == $d->IdDestinoOficina)
<tr>
<td style="display:none;">{{$d->IdDocumento}}</td>
<td>{{$d->NroRegistro}}</td>
<td>{{$d->FechaDocumento}}</td>
<td>
<a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
</td>
</tr>
@endif
@endif
@endforeach
@foreach(auth()->user()->CargarAreas() as $a)
@if(auth()->user()->IdEmpleado == $a->IdEmpleado)
@foreach($documentos as $d)
@if($a->IdOficina == $d->IdDestinoUnidad_su_Oficina and $a->IdUnidadSubArea == $d->IdDestinoUnidad)
<tr>
<td style="display:none;">{{$d->IdDocumento}}</td>
<td>{{$d->NroRegistro}}</td>
<td>{{$d->FechaDocumento}}</td>
<td>
<a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
</td>
</tr>
@endif
@endforeach
@endif
@endforeach
</tbody>
</table>
</div>
</div>
Sus Scripts son:
$('#Buscar').on('click', function(){
var numero = $('#NroRegistro').val();
$.ajax({
url: "/Documentos/cargar_tabla",
type: "post",
dataType: "json",
data: {_token: "{{ csrf_token() }}", text: numero},
success: function (response) {
$('#table-body').html("");
$("#table-body").html(response);
}
});
});
$('.Procesar').on('click', function(){
var id = $(this).parents("tr").find('td').eq(0).text();
$.ajax({
url: "/Documentos/cargar_tabla",
type: "post",
dataType: "json",
data: {_token: "{{ csrf_token() }}", text: id},
success: function (response) {
$('#table-body').html("");
$("#table-body").html(response);
}
});
});
Al momento que hago una búsqueda carga este documento aparte dentro del
`<tbody>`:
@foreach($documentos as $d)
@if($d->IdDestinoOficina!='')
@if(auth()->user()->IdOficina == $d->IdDestinoOficina)
<tr>
<td style="display:none;">{{$d->IdDocumento}}</td>
<td>{{$d->NroRegistro}}</td>
<td>{{$d->FechaDocumento}}</td>
<td>
<a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
</td>
</tr>
@endif
@endif
@endforeach
@foreach(auth()->user()->CargarAreas() as $a)
@if(auth()->user()->IdEmpleado == $a->IdEmpleado)
@foreach($documentos as $d)
@if($a->IdOficina == $d->IdDestinoUnidad_su_Oficina and $a->IdUnidadSubArea == $d->IdDestinoUnidad)
<tr>
<td style="display:none;">{{$d->IdDocumento}}</td>
<td>{{$d->NroRegistro}}</td>
<td>{{$d->FechaDocumento}}</td>
<td>
<a href="javascript:;" class="btn btn-warning m-btn m-btn--icon btn-sm m-btn--icon-only Procesar" title="Procesar"><i class="la la-file-movie-o"></i></a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--icon btn-sm m-btn--icon-only Archivar" title="Archivar"><i class="la la-file-zip-o"></i></a>
</td>
</tr>
@endif
@endforeach
@endif
@endforeach
Entonces...no sé por qué deja de funcionar los botones...o estoy haciendo algo mal??
onClick
debería verse algo así$(document).on('click','#Buscar', function()
. Intenta y me avisas como te va para colocarlo como respuesta.