jQuery/Ajax를 사용하여 양식을 제출하는 경우 항상 작동합니다.

Question

Ajax/jQuery를 통해 파일을 업로드하는 양식을 제출하고 PHP 스크립트를 통해 양식을 처리 한 다음 해당 div의 결과를 반환합니다. 형태는 원래에 거주

나의 현재 형태의 코드는 다음과 같습니다.

<section id="content-right"> 
<form name="uploader" id="uploader" method="POST" enctype="multipart/form-data"> 
    <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="10485760" /> 
    <input type="file" name="fileselect" id="fileselect" /> 
    <input type="submit" name="submit" id="submit" value="Upload" /> 
</form> 
</section> 

그리고 내 현재 아약스/jQuery를 스크립트는 다음과 같습니다

<script> 
$(function() { 
$('#uploader').submit(function() { 
     $(this).ajaxSubmit({ 
      type: $(this).attr('method'), 
      url: 'upload-song.php', 
      success: function(response) { 
       $('#content-right').html(response); 
       } 
      }); 
    return false; 
    }); 
}); 

내 PHP 스크립트는 "upload-song.php"입니다 (세부 사항은 중요하지 않음).

정상적인 탐색 (href) 링크를 처리하고 # content-right에서 링크를로드하기 위해 YUI.Pjax를 실행하고 있습니다 (사용자가 아무 것도 클릭하면 # content-right에서로드하고 싶습니다).

이 설정을 사용하면 일반 링크를 탐색하는 것이 완벽하게 작동하며 모든 콘텐츠는 # 콘텐츠 오른쪽에로드되지만 업 로더는 2 회만 작동합니다.

예를 들어 uploader는 # content-right에서 upload-song.php를로드하고 모든 것을 완벽하게 처리합니다. 그러면 페이지에서 벗어나 다른 항목을 업로드하려고 시도하면 작동하지 않습니다. (action = "upload-song.php"를 폼 태그에 넣으면 upload-song.php를 # content-right가 아닌 전체 페이지로로드합니다.) 페이지를 새로 고치십시오. 페이지를 새로 고친 후 다른 항목을 업로드하면 완벽하게 작동합니다.

내 Ajax 스크립트를 양식 제출에 연결하는 방법과 관련이 있다고 생각합니다 (페이지를 새로 고치면 완벽하게 작동하기 때문에). 그러나 이러한 언어에 대한 많은 경험이 없으므로 그것을 고치는 방법을 모르겠다.

또한 YUI.Pjax를 사용 중지하면 업 로더가 수정되지만 내 링크는 분명히 끊어져서 해결 방법을 찾고 있습니다.

아이디어가 있으십니까?

Answer 1

이 시도 :

$(document).on("submit", "#uploader", function() ... 

이 구문은 문서까지 이벤트 거품을 제출하게됩니다. 그런 식으로 #content_right 섹션이 다시로드되면 문서는 DOM 준비 기능에 설정된 이벤트 인식 응답을 유지합니다.