Javascript jQuery ajax在第一次单击后失败

我设置了一个链接，用于查询Instagram API并显示图像。我想要它，所以当我再次点击链接时，它会刷新并给我更新的图像（或多个链接）。但它总是在第一次单击后失败

   <div class="keywords">
   <p id="olympics"><a href="#">#olympics</a></p>
   <p id="london"><a href="#">#london</a></p>
   </div>

这是我的JS：

  $(".keywords").live('click',function()

  {        
      $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/v1/tags/olympics/media/recent?client_id=XXXXXXXXX&access_token=XXXXXXXXXXXXX",
      success: function(data) {
          for (var i = 0; i < 10; i++) {
              $(".pics").append("<a target='_blank' href='" + data.data[i].link +
              "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
                                      }
                              }                

      })
  }
  );

$（“.keywords”）.live（'click'，function（））
{        
$.ajax({
键入：“获取”，
数据类型：“jsonp”，
cache:false，
url:“https://api.instagram.com/v1/tags/olympics/media/recent?client_id=XXXXXXXXX&access_token=XXXXXXXXXXXXX",
成功：功能（数据）{
对于（变量i=0；i<10；i++）{
$（“.pics”）。追加（“”）；
}
}                
})
}
);

在处理第一个结果时，可能会出现javascript错误，因为无论返回什么结果，for循环都会运行10次。这可能会停止第二个请求的运行

尝试将成功回调的内容更改为：

for (var i = 0; i < data.data.length; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

for（变量i=0；i

我将10改为data.data.length，这样它将只循环返回的结果数

如果要仅显示最大值10，请执行以下操作：

for (var i = 0; i < data.data.length && i < 10; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link + "'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

for（变量i=0；i

工作样本：

---

您刚才有一个括号错误；）次要的语法问题。第一次在JSFIDLE中工作

我发现了这个问题

for (var i = 0; i < 10; i++) {

for（变量i=0；i<10；i++）{

您已经硬编码了10。您确定每次都会看到“最新”的图像列表吗？

---

或者，可能是新图像被附加到JSON中，而您没有看到这一点，只是因为您只对其进行了10次迭代。

如果您想在新单击时刷新pics列表，您可能需要在附加新图像之前清空

.pics

div

$(".pics").empty();
for (var i = 0; i < 10; i++) {
    $(".pics").append("<a target='_blank' href='" + data.data[i].link +
"'><img src='" + data.data[i].images.low_resolution.url +"'></img></a>");
}

$（“.pics”）.empty（）；
对于（变量i=0；i<10；i++）{
$（“.pics”）。追加（“”）；
}

因为现在图片被添加到列表中而没有被替换

编辑

---

对不起，

$（“.pics”）.empty（）；

应该在for循环之前，而不是在for循环内部。

您可以在第一次和第二次打印

数据的内容吗？使用
.on（）
或
'.delegate（）
而不是
'.live（）
这是一种不好的做法，无论如何都会被弃用。定义“失败”。您可以设置一个Fiddle吗？或者告诉我们您在控制台或XHR日志中看到的任何错误吗？您使用的是“append”，因此它不会作为刷新，它只会再次添加图像。也许您应该使用
$（'.pics'）。empty（）
在循环之前，我刚刚编辑了答案，因为我将
设置为空（）
在错误的位置：d这很好。非常感谢。我只是不明白为什么我应该在循环之前清空div？它至少应该追加吗？因为每次使用ajax调用检索项目时，都会将它们添加到pics列表的末尾。在添加
empty（）之前
调用也在工作，但图像被追加（删除
empty（）
，如果向下滚动，每次单击结束时都会看到更多图像被添加）。要替换（刷新）它们，需要先清空
.pics
容器，然后开始添加新检索的图像。