json很多通过ajax加载第二次点击

我是jQuery和ajax的新手。我正在创建一个应用程序，根据点击的导航选项从同一个json文件加载不同的内容。json很多通过ajax加载第二次点击

这是我的代码：

$(document).ready(function(){ 

    var $wrapper = $(".wrapper"); 
    $(document).on("click", ".navLink", loadRecipes); 
    function loadRecipes(){ 

     var type = $(this).attr("href"); 
     $.ajax({ 

      type: "GET", 
      url: "recipes.json", 
      cache: false, 
      success: function(data){ 
      for(var i = 0; i < data.recipes.length; i++){ 

       var recipe = data.recipes[i]; 
       if(type == recipe.type){ 

        var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
        $wrapper.append(name); 

       } 

      } 

     }); 
     return false; 

    } 

})

并且json看起来像：

{ 
"recipes":[ 
{"name": "A", "type":"type1"}, 
{"name": "B", "type":"type2"}, 
{"name": "C", "type":"type2"}, 
{"name": "C", "type":"type1"} 
] 
}

href属性在JSON文件类型属性相匹配。因此，点击特定链接时，会加载json的特定元素。当我第一次点击其中一个链接时，会加载相应的内容。但是，当我尝试点击另一个链接，点击事件触发，但JSON内容不加载。我已经在click事件上引入了事件委托，但它没有帮助。我认为这可能是一个缓存问题，所以我添加了缓存：false参数，但它也没有帮助。如果任何人都可以给我一个线索，我可能会错过什么，我将不胜感激。

来源

2017-05-05 Natka

你确定'.wrapper'元素一直存在吗？我的意思是你说导航..所以它不确定这个元素是否存在..除此之外，你可以尝试在'success'中放置'debugger'来查看第二次点击是否到达预期的位置。 –

您从相同的链接中获取相同的内容，即为什么Ajax没有加载两次。也许会适合你这样的事情：

$(document).ready(function(){ 

var $wrapper = $(".wrapper"); 
$(document).on("click", ".navLink", loadRecipes); 
function loadRecipes(){ 

    var type = $(this).attr("href"); 
    $.ajax({ 

     type: "GET", 
     url: "recipes.json?type=" + type, 
     dataType: "JSON", 
     cache: false, 
     success: function(data){ 
      var recipe = data; 
      var name = "<h3 class='recipeTitle'>" + recipe.name + "</h3>"; 
       $wrapper.append(name); 

     } 

    }); 
    return false; 

}

}）

更改服务器的答案取决于输入变量。答案是唯一的，你需要的数据：

{"name": "B", "type":"type2"}

或者你可以在任何情况下设置阿贾克斯只有一次获得所有类型和点击只是追加它来包装。

来源

2017-05-05 11:58:36 Indra

英迪拉，非常感谢您的帮助。我试过使用你的解决方案，但它没有奏效。然而，你写的“你从相同的链接采取相同的内容”让我想到 - 我曾尝试将不同的数据类型分离成单独的json文件，但仍然无法使用。但是我注意到，在开发人员工具的网络选项卡中，单击链接时正在加载相应的文件。实际上，我加载到$（“。wrapper”）的html要复杂得多 - 我简化了它，因为它在解释我的问题时不相关。结果元素在页面上占用了更多空间。我觉得有点傻，但我注意到新内容实际上正在加载，但只是在页面的底部，旧内容仍然处于顶端。解决这个问题的方法就是清空成功响应函数顶部的$（“。wrapper”）。

来源

2017-05-05 16:26:15 Natka

json很多通过ajax加载第二次点击

回答

相关问题