求助：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);
 });
});

假设现在我第一次尝试切换到此页面并创建新模板，那么ajax会向php发布一条帖子，在数据库中添加一个新条目；如果我在页面之间切换并返回到模板页面、创建一个新模板，那ajax会向php发送2个帖子，并创建了2个数据库条目；如果我再这样做一次，则会有4个帖子......依此类推。

使用ajax的每个函数都会发生这种情况。但是当我不单独通过内容div进入主页时，这些就不会发生，因此我怀疑切换页面的方式有些混乱。

PS：它实际上不是加倍，而是每次都添加一个请求。

更新：

我以某种方式对其进行了修复，但不确定具体是如何修复好的。这是我所做的事情：我在函数中添加了.off('click','#sideNav a')还将该函数放入单独的js文件。我觉得它每次都在重新加载脚本，但不确定是否完全修复了该脚本，希望对你有所帮助。

Answer 1

As a solution to this you could use off() to dettach the click event (if exist) before attaching :

$(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 the cause of this problem comes from the posted code when you call it multiple time every time you call it the event will be attached another time and so on.