왜 이렇게 여러 번 추가됩니까? AJAX

Question

이 아약스 기능이 있습니다. 텍스트 영역의 값을 가져 와서 변수로 설정 한 다음이를 Instagram으로 보냅니다. 그것은 작동합니다.

페이지를 새로 고치지 않고 게시 된 댓글을 표시하기 위해 div에 텍스트 영역 값을 추가하고 싶습니다. 그것은 기본적으로 페이지가 다시로드 될 때 instagram에서 실제 주석으로 대체 될 일시적으로 볼 수있는 주석입니다.

먼저, 내가하려는 것은이 모든 오류 필드에 있다는 것을 무시하십시오. 내가 현지에서 일하기 때문에 성공하지 못한다. 지금은 중요하지 않습니다.

내가 겪고있는 문제는 텍스트 영역의 데이터를 추가 할 때마다 여러 번 추가된다는 것입니다. 내 페이지에 현재 Instagram에서 4 개의 이미지가 표시됩니다. 각 사진에 텍스트 영역 데이터를 4 번 추가하고 isntagram에 데이터를 보내지 않고 가짜 주석을 추가합니다.

인스 타 그램에서 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>'); 
        });