javascript - Ajax 请求不断翻倍

Question

我有一个网站，主页上有一个内容 div，并且使用 ajax 切换内容。每次我在不同页面之间切换时，在我看来，ajax 不断发出双倍的请求量。这是处理页面切换的代码:

$(document).on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from

    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

现在假设我切换到模板页面，其中显示已创建的模板并允许我创建模板。

现在，我第一次切换到此页面并创建一个新模板，一切都很好，在 php 中发布了一篇文章，并在数据库中创建了一个新条目。现在，如果我在页面之间切换并返回到模板页面并创建一个新模板，只有这一次 ajax 才会向 php 发送两个帖子并创建 2 个数据库条目，现在如果我再这样做一次，4 个帖子就会变得疯狂，依此类推。

每个使用 ajax 的函数都会发生这种情况。当我单独进入模板页面而不是通过带有内容 div 的主页时，这种情况不会发生，所以我怀疑我切换页面的方式出现了问题。

编辑:实际上并不是加倍，而是每次添加一个请求。

更新 我以某种方式修复了它，不完全确定如何修复，但这是我所做的事情:我将 .off('click','#sideNav a') 添加到我的函数中，并将该函数放入单独的 . js 文件。我觉得它每次都会重新加载脚本，再次不确定到底是什么修复了它，希望它对某人有帮助。

Answer 1

作为此问题的解决方案，您可以在附加之前使用 off() 分离点击事件(如果存在):

$(document).off('click','#sideNav a').on('click','#sideNav a',function(e){ 
    e.preventDefault();
    var url = $(this).attr('href'); //get the link you want to load data from
    $.ajax({ 
     type: 'GET',
     url: url,
     success: function(data) { 
        $("#content").empty();
        $("#content").html(data); 
    } 
   }); 
   //window.history.pushState('object', 'New Title', url);
 });
});

IMO，此问题的原因来自于发布的代码，当您多次调用它时，每次调用它时，事件都会附加一次，依此类推。