jquery를 사용하여 클릭 한 후 단추 옆에 ajax 로딩 이미지를 표시하는 방법

Question

ajax get을 실행하는 단추가 있으며 시간이 오래 걸립니다. Ajax 로딩 이미지를 버튼 오른쪽에 올바르게 표시하는 가장 쉬운 방법은 무엇입니까?

내가 레이아웃에 나중에 버튼을 이동시킬 수

그래서 난이 (아약스가 호출되기 전에) 클릭 이벤트 후

(레이아웃에 하드 코딩 사업부에 비해) 동적되고 싶어, 나는이 시도 :

$(selector).append("<img src='/images/ajax-loading1.gif' />"); 

하지만 당신은 아마 after 대신 append 원하는 무엇이든

Answer 1

을 할 것 같지 않았다.

$(selector).after("<img src='/images/ajax-loading1.gif' />"); 

그러나 계정에 AJAX 후 아이콘의 제거를 복용는 방법에 대해, 완료 : 문제가 이미지의 배치 인 경우

$(selector).bind('click', function() { 
    var spinner = $("<img src='/images/ajax-loading1.gif' />").insertAfter(this); 

    jQuery.ajax({ 
     success: function (response) { 
      // handle response 

      spinner.remove(); 
     }); 
    }); 
}); 

Answer 2

, 왜 (위치와 CSS 클래스를 사용하지 필요에 따라 변경할 수 있음).

느리게 실행되는 아약스 문제 인 경우 더 많은 정보가 필요하다고 생각합니다.

Answer 3

당신이 아약스 호출이 후() 함수를 사용하여 실행하기 전에 : 아약스 요청이 요소 제거 완료 후 다음

$('.button').after('<img class="loading-ajax" src="/images/loading.gif" alt="Loading" />'); 

을 :

$('.loading-ajax').remove();