javascript - 第一次点击后 jQuery ajax 失败

Question

我设置了一个链接来查询 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>");
                                      }
                              }                

      })
  }
  );

Answer 1

如果您想在新的点击时刷新图片列表，您可能需要在添加新图片之前清空 .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(); 应该在 for 循环之前而不是在它里面。