這是爲什麼多次添加？ AJAX

Question

我有這個ajax函數。它獲得一個textarea的值，將其設置爲一個變量，然後將其發送給instagram。有用。

我想將文本區域值附加到div以顯示發佈的評論，而不刷新頁面。它基本上是一個臨時的可見評論，當頁面重新加載時，它將被來自instagram的實際評論取代。

首先，忽略我正在嘗試做的是在所有這些的錯誤字段中。因爲我在本地工作，所以成功不起作用，它已經交換。現在沒關係。

我遇到的問題是當我從文本區域追加數據時，它會多次附加它。我目前在我的頁面上顯示來自Instagram的4張圖片。它會在每張照片上追加文本區域數據4次，而不是將數據發送給isntagram，只是附加假評論。

如果我從instagram中刪除2張圖片，它會爲每張圖片添加兩張圖片...爲什麼要這樣做，以及如何在提交表格時添加圖片，到那個div。

這裏是我提交評論的函數。

function instaComment(){ 

    $('.messageTextarea').keydown(function() { 
     if (event.keyCode == 13) { 
      this.form.submit(); 
      return false; 
     } 
    }); 

    $('.button').live('click', function(){ 


     var name = $(this).siblings('.messageTextarea').val(); 
     var dataString = name; 

     $.ajax({ 
     dataType: 'json', 
      url: "https://api.instagram.com/v1/media/"+$(this).attr('data-the_id')+"/comments?"+hash, 
      type: "POST", 
      data: "text="+dataString, 
      success: function(data) { 
       // finish load 
      console.log(data, dataString, 'succ'); 
      }, 
      error: function(data) { 
       for (i=0; i < instadata[0].data.length; i++){ 
        var username = instadata[0].data[i].user.username; 
        var profilepic = instadata[0].data[i].user.profile_picture; 

        console.log(data, dataString, 'succ'); 
        $(this).each(function() { 
         $('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>'); 
        }); 


       } 
     } 
    }); 
    return false; 
}); 
} 

Answer 1

我不知道，但我認爲從這一行代碼

$(this).each(function() { 
         $('.messageComments').append('<li><img class="commentUserImg" src="' + profilepic + '"><div class="commentUser">' + username + '</div><div class="commentText">' + dataString + '</div></li>'); 
        });