Question

我的网站上有这个部分的问题：

$(document).ready(function(){

  function loadContent(val){
    $(".gallery").load(val, function(){
    console.log("Loaded");
  });
}

$(".Javascript").click(function(){
  loadContent("Javascript.html");
});

$(".JQuery").click(function(){
 loadContent("JQuery.html");
});

$(".HTML").click(function(){
 loadContent("HTML-CSS.html");
});

$(".APIs").click(function(){
  loadContent("APIs.html")
});

$(".Angular").click(function(){
 loadContent("Angular.html")
  });
});

基本上，每次点击链接时，我都会使用load（）函数带来一个带有图库的新HTML文件。但是看一下控制台，每次点击一下，GET的数量就会增加一倍，这就是控制台上显示的内容：

XHR完成加载：GET“http://localhost:8888/script.js。”

如何防止这种倍增以及导致此行为的原因？

Answer 1

代码看起来正确。可能是你包括这个脚本两次？或者你可能有两个.gallery块？尝试将其内嵌在标记内的HTML中。这有帮助吗？

Answer 2

JQuery .load(url)还将默认包含并执行所请求HTML内的脚本。通过指定选择器，将排除脚本。

一个例子：

// Load article.html with scripts:
$( "#a" ).load( "article.html" );

// Load article.html#content without scripts:
$( "#b" ).load( "article.html #content" );

Answer 3

毕竟解决方案是在每个点击功能上添加.off（）：

$(".Javascript").off('click').click(function(){
  loadContent("Javascript.html")
});

每次AJAX调用后单击事件乘以

3 个答案: