第一次点击后jQuery ajax失败

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

<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>"); 
             } 
           }     

     }) 
    } 
);

来源

2012-07-27 Rami

您是否可以在第一次和第二次打印“数据”的内容？ – BiAiB 2012-07-27 09:53:12

使用'.on（）'或''.delegate（）'而不是''.live（）'这是不好的习惯，反正也会被弃用。 – 2012-07-27 09:53:26

定义'失败'。你能设置一个小提琴吗？ – Utkanos 2012-07-27 09:53:34

如果要在新的点击上刷新图片列表，您可能需要在添加新图片之前清空.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循环不里面。

来源

2012-07-27 10:03:13 Bogdan

这似乎是行得通的，但它只让我有一个事件参数在click事件回调函数中被指定，像'$（“。keywords”图像，而不是10？ – Rami 2012-07-27 10:08:08

刚刚编辑答案，因为我把'empty（）'放在错误的地方：D – Bogdan 2012-07-27 10:08:36

这很好。非常感谢。我只是没有弄清楚为什么我应该在循环之前清空div。它不应该至少追加？ – Rami 2012-07-27 10:17:05

这是可能的，你正在处理的第一个结果时，作为你的for循环得到一个JavaScript错误运行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>"); 
}

我改变了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>"); 
}

来源

2012-07-27 09:57:06

工作样本： http://jsfiddle.net/h6NgP/

你只是有一个支架的错误;）未成年人的语法事情。工程的jsfiddle

来源

2012-07-27 10:00:15

我第一次看到的问题与此