第一次點擊後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

我第一次看到的問題與此