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

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

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

这是bootpag代码

 $.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调用的相同函数（正如我所说的那样）。它导致“页面”事件被绑定多次。因此，当我第三次单击页面时，它将运行on page事件三次，依此类推。

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

如何解决此问题，并且仅使事件运行一次？我更喜欢非骇客的解决方案。谢谢。

最佳答案

但是，它与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();