이 콜백이 두 번 실행되는 이유는 무엇입니까?

Question

제출할 때 양식을 처리하는 jQuery ajax 스크립트가 있습니다. 그러나, 나는 ajax 요청 중에 "processing ..."과 "done"등을 추가하는 몇 가지 콜백을 가지고있다. 그러나 스크립트가 모두 끝나면 스크립트에서 다시 edit button을 추가하여 양식을 다시 사용할 수 있지만 버튼을 두 번 추가합니다.

이 아약스 요청이 시작되는 곳, 코멘트 당신이

$.ajax({ 

    url: "../ajax/update_site_info.php?id=" + $('[name="site_id"]').val() + "&field=" + $(parent).children("input").attr("name") + "&value=" + $(parent).children("input").val(), 
    cache: false, 
    success: function(response){ 

     //alert('success'); 

     // On success, fade out the "Saving..." 
     $(parent).children('.message').fadeOut(150, function(){ 

      //alert('message'); 

      // Remove the save button (submit button) 
      $(parent).children(".jUpdateSave").remove(); 

      // Add "Saved!" 
      $(parent).append('<span class="message">' + response + '</span>'); 

      // Let "Saved!" linger for a while before it fades out 
      $(parent).children('.message').delay(1500).fadeOut(250, function(){ 

       //alert("stop"); // THIS IS WHERE THINGS HAPPEN TWICE 

       // Put the edit button back 
       $(parent).append('<a class="jUpdate"><img src="images/shared/icon_edit.png" width="16" height="12" alt=""></a>'); 

       // Remove the "Saved1" message 
       $(parent).children('.message').remove(); 
      }); 
     }); 
    } 
}).error(function(){ 

    $(".message").text("There was an error proccessing your request. [0]"); 
}); 

전체 스크립트가 here입니다 따라 도움이 될 것입니다.

마지막 콜백이 두 번 발생한다는 점을 제외하면 모든 것에 대해 작동합니다 (stop에 두 번 경고 함).

의견이 있으십니까?

Answer 1

는

$(parent).children('.message') 

복귀 두 가지 요소합니까?

Answer 2

각 .message에 .append()을 부릅니다.

$(parent).children('.message').fadeOut(150, function(){ 

을 여기에 하나를 추가합니다 :

$(parent).append('<span class="message">' + response + '</span>'); 

버튼이 .message 클래스 각 요소에 대해 다시 생성됩니다 당신이 여기를 참조하기 때문에 당신이이 있다고 가정합니다.

문제를 해결하려면 .message 클래스의 자식 요소를 여러 개 만들거나 delay()/fadeOut() 문을 한 번만 실행하십시오.

Answer 3

여러 요청에 대한 Ajax 응답이 오기 전에 페이지에 1 개 이상의 .message 스팬이 있다고 생각합니다. 그냥이 코드를 시도해보십시오.

// On success, fade out the "Saving..." 
     $(parent).children('.message').fadeOut(150, function(){ 

      //alert('message'); 

      // Remove the save button (submit button) 
      $(parent).children(".jUpdateSave").remove(); 

      // Add "Saved!" 
      $(parent).append('<span class="message">' + response + '</span>'); 

      // Let "Saved!" linger for a while before it fades out 
      $(parent).children('.message:first').delay(1500).fadeOut(250, function(){ 

       //alert("stop"); // THIS IS WHERE THINGS HAPPEN TWICE 

       // Put the edit button back 
       $(parent).append('<a class="jUpdate"><img src="images/shared/icon_edit.png" width="16" height="12" alt=""></a>'); 

       // Remove the "Saved1" message 
       $(parent).children('.message:first').remove(); 
      }); 
     });