在返回的 Ajax 函数之后使用时，bootpag 事件会运行多次

Question

我在我的 .NET/jQuery 项目中使用 bootpag jQuery 分页插件。在我的项目中，我有一个过滤菜单。当用户单击其中一个过滤选项时，我运行对服务器进行 Ajax 调用，用新的 filtered/paged 数据更新页面。

我在“.done”ajax 函数中初始化 bootpag，就在调用的 ajax 返回之后。

这是引导程序代码

 $.ajax({
   // some ajax call data info here to get the filtered results
  }).done(function(data){

     $("#paging").bootpag({     
        total: (data.totalResults / CONST_RESULTS_PER_PAGE) + 1
       }).on('page', function (event, num) {
          updateListWithFilteredResults(num);
       });
  });

问题是，当 bootpag 检测到页面点击时，它运行是相同的函数（正如我告诉它的那样），其中包含 ajax 调用，其中包含相同的代码。它会导致 'page' 事件被绑定多次。因此，当我第三次单击某个页面时，它会运行 on 'page' 事件三次，依此类推。

我需要在 ajax 调用后初始化 bootpag，因为这是我获得总结果的地方，我用它来初始化 bootpag 插件（还有一些其他数据，但总页数是最重要的属性初始化引导页）。

如何解决这个问题，并且只使事件运行一次？我更喜欢非 hackish 解决方案。谢谢

Answer 1

不过，它与 bootpag 没有太大关系。正如您提到的页面初始化和重复的用户操作，两种情况下 ajax 请求的处理应该不同。

function refreshData() {
    return $.ajax({
        // some ajax call data info here to get the filtered results
    }).then(function (data) {
        return $("#paging").bootpag({
            total: (data.totalResults / CONST_RESULTS_PER_PAGE) + 1
        });
    });
}

//on init of page do
refreshData().then(function (bootpag) {
    bootpag.on('page', function (event, num) {
        updateListWithFilteredResults(num);
    });
});

//on user click just
refreshData();

在返回的 Ajax 函数之后使用时，bootpag 事件会运行多次

bootpag event runs several times when used after a returned Ajax function

javascript

ajax

jquery

pagination