Question

我已经问了一半这个问题，但是当我开始调试和搞乱代码时，我发现了其他一些问题。在我的网站http://www.yokaproject.com/上，为了论证，这就是我想要你做的。首先点击art选项卡，你会注意到两个日志到控制台一个用于脚本长度，另一个是ajax调用，分别是5和1。我不明白为什么它记录5，我有4个已知的脚本。然后单击下一个选项卡，音乐，它将为脚本长度记录8次，并且ajax调用两次，为什么？此外，它将继续添加这种模式。我有这个非常简单的请求，请与我合作。我不是说为我写代码或给我一切，只是帮助指导我，所以我实际上可以了解我的错误以及如何纠正它。事实上，我甚至会与某人聊天并就此问题进行讨论，我真的很想写出更好的JS。这里说的是我的代码（忽略我的脚本检查功能，意在评论出来）：

*这只是我的ajax功能，请查看我的网站以查看更多详情，http://www.yokaproject.com/index.html

function handlersAttached(){
  $('.header a').on('click', ajaxLoad);

}

handlersAttached();


function ajaxLoad(e) {
  console.log($("script").length);
  console.log("ajax called");
    e.preventDefault();
    var url = $(this).attr("href");
    var that = $(this);
    that.off('click'); // remove handler
    $.ajax({
      url: url,
      dataType: "html",
      type: "GET",
      cache: false
    }).done(function(data){
        $("#container").html(data);
    })
};

Answer 1

首次点击$(scripts)返回以下代码：

<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script>
<script type="text/javascript" src="../assets/load_scripts.js"></script>
<script>/*google analytics stuff*/</script>

下一个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script>
<script src="../assets/load_scripts.js"></script>
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="../assets/instafeed.js-master/instafeed.min.js"></script>
<script type="text/javascript" src="../assets/load_scripts.js"></script>
<script>/*google analytics stuff*/</script>

似乎每次执行ajax调用时，前三个都会附加到DOM树。此外，load_scripts.js本身就是其中之一，因此下一次点击会分别产生更多的ajax调用和更多触发的处理程序{/ 1}}。

解决方案：不要在ajax响应中包含脚本，或者至少不要将它们附加到DOM树。取决于你想要实现的目标：）

Ajax加载多次以及脚本加载多次

1 个答案: