как использовать функцию при динамической перезагрузке страницы

Question

Для сортировки таблицы я использую сортировщик таблиц, как показано ниже:

<div class="dynamic-content">
    <table>
      <!-- code goes here -->
    </table>
</div> <!-- this div reloads only -->

<script src="tablesort.js"></script>

$('table').tableSort();

Проблема: страница перезагружается динамически, поэтому после вызова ajax она больше не работает. Как я могу заставить это все еще работать, когда страница динамически перезагружается?

Answer 1

То, что вы сделали, звонит $('table').tableSort(); один раз.

Когда данные таблицы изменяются с помощью ajax-запроса, вы должны вызывать это снова.

Например, если вы делаете что-то вроде

$.ajax({
  url: ...,
}).done(function( data ) {
  // do something with data
  $('table').tableSort();
});

Answer 2

Если вы не хотите или не можете прослушивать ajax-запрос, который вносит изменения, вы можете наблюдать за изменением динамического div и снова сортировать таблицу. Вы можете использовать Обозреватель мутаций, как упомянуто здесь https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver.

Я также готовлю коды и коробку для демонстрации https://codesandbox.io/s/w055v284r5