Estoy actualizando una tabla cada 5 segundos con JS. El archivo que carga tiene información sobre herramientas de arranque y confirmaciones. Cuando se desplaza sobre uno de estos elementos y los datos se actualizan, la información sobre herramientas o la confirmación permanecen en la pantalla incluso si el mouse ya no está en el área.

Índice JS

 $(document).ready(function(){ $('#table-main').load('functions/fetch-main.php'); refreshTable(); }); function refreshTable(){ $('#table-main').load('functions/fetch-main.php', function(){ setTimeout(refreshTable, 5000); }); }

Dentro del archivo functions/fetch-main.php, esta es una de las sugerencias

 echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#editlog' data-id='" . $row['id'] . "'><span data-toggle='tooltip' title='Edit Record'><i class='fas fa-edit'></i></span></button> ";

Cuando el archivo se vuelve a cargar, la parte superior de la herramienta permanece en la pantalla

Para que la información sobre herramientas y la confirmación funcionen en primer lugar, tuve que copiar lo siguiente en el archivo de búsqueda real, aunque ya está en el archivo de índice principal

 <script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); $('[data-toggle=confirmation]').confirmation({ rootSelector: '[data-toggle=confirmation]' }); $('[data-toggle=confirmation-popout]').confirmation({ rootSelector: '[data-toggle=confirmation-popout]' }); </script>

¿Es posible evitar que esto suceda?

Gracias