动态重新加载页面时如何使用函数答案

【问题标题】：how to use a function when page is dynamically reloaded动态重新加载页面时如何使用函数
【发布时间】：2019-09-26 12:28:05
【问题描述】：

为了对表格进行排序，我使用如下表格排序器：

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

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

$('table').tableSort();

问题：页面是动态重新加载的，所以在 ajax 调用之后，它不再工作了。当页面动态重新加载时，如何使其仍然有效？

【问题讨论】：

我的意思是，当页面转移发生时，这与重新加载相同，只是停留在同一个页面上，整个页面被吹走并重新创建 DOM。如果您希望该逻辑继续工作，您将不得不再次执行初始化。
JQuery DataTables 在你必须重新加载表数据时有一个“销毁”方法。您正在使用的“tablesort”API 是否有类似的选项？

标签： javascript jquery function dynamic

【解决方案1】：

你所做的是调用$('table').tableSort();一次。

当表格数据被 ajax 请求更改时，您必须再次调用它。

例如，如果你做类似的事情

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

【讨论】：

@mudrayakatusha 请记住，如果这实际上解决了您的问题，那么您的问题主题具有误导性。您没有动态重新加载页面。您正在替换页面内容。页面重新加载是一个完全不同的明确定义的操作。

【解决方案2】：

如果您不想或无法监听进行更改的 ajax 请求，那么您可以观察动态 div 的更改并再次对表格进行排序。你可以使用这里提到的突变观察者https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。

我还准备了一个codeandbox来演示https://codesandbox.io/s/w055v284r5

【讨论】：