동적으로로드 된 양식에서 입력 이벤트를 jQuery multifile에 바인드 할 수 없습니다.

Question

동적으로로드 된 양식에서 jQuery 다중 파일 플러그인을 사용하여 파일을 업로드하려고 할 때 이상한 동작이 나타납니다.

나는 파이어 폭스 9.0.1/맥

이 내가 변경 이벤트에 바인딩하려고 어떻게 사용하고 있습니다 : 나뿐만 아니라 블러를 시도 (클릭하고 ...)를

$('#newticketform').live('change',function (e){ //newticket form is the form in which my input type=file is contained  
     $('#my_file_element').MultiFile(); //my_file_element is the input type=file element 
}); 

바인딩이 양식 또는 입력 필드에 있어야합니까? 나는 행동에 어떤 차이도없이 두 가지 모두 시도했다.

.live 대신 .on을 사용하면 위의 기능이 전혀 트리거되지 않습니다.

양식을 동적 콘텐츠로로드하기 전에 파일을 업로드 할 수있었습니다. 폼을 메인 페이지에로드 할 때, 나는 어떤 방법 으로든 이벤트를 바인딩해야합니다.

• 1 시간 : :이 일이 무엇이다

  아무런 변화가 없다 (그러나 그는 트리거 위의 기능, 는 경고를 사용하여 확인). 나는. 업로드 할 파일 목록에 파일이 첨부되어 있지 않습니다.

• 두 번째 : 파일이 목록에 추가됩니다.

처음으로 파일을 추가하려고 시도하기 전에 바인딩이 실현되지 않은 것처럼 보이고 두 번째로 작동 중입니다. 나뿐만 아니라 HTML을 포함하고있어 이런 경우에

:

<form method="post" enctype="multipart/form-data" id="newticketform"> 
     <input type="hidden" value="2000000" name="MAX_FILE_SIZE"> 
     <label for="title">Rubrik</label> <input type="text" name="title" id="title"><br><br> 
       <label for="description">Beskrivning</label> <textarea name="description" id="description" cols="50" rows="15"></textarea><br> 

       <input type="file" maxlength="5" name="file[]" id="my_file_element" class="multi"> 
       <div id="files_list"></div> 
       <input type="submit" value="Upload" name="upload"> 
</form> 

아래 재스퍼에서 피드백 후이를 테스트 :

$("#newticketmenu").live('click',function(event){ 
      $("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket/newticket.php", function(){ 
       $('#newticketform').on('change', '#my_file_element', function(){  
        $(this).MultiFile(); 
       }) 
       addNewTicketValidation();           
      }); 
     }); 

을 아직 정확히 같은 동작.

모든 JavaScript 파일은 기본 페이지와 함께로드됩니다.

내가 뭘 잘못하고 있니? 내 바인딩 방식이 올바르지 않습니까?

감사합니다.

Answer 1

사용자가 파일 입력과 상호 작용하기 전에 플러그인 MultiFile을 호출해야합니다. 요소에 DOM을 추가하자마자 MultiFile 플러그인을 호출해야합니다.

내가 동적 페이지에 양식을 추가하는 방법을 잘 모르겠지만 여기에서 자상입니다 : 사이드 노트에

$.ajax({ 
    url  : '<url>', 
    success : function (serverResponse) { 
     $('#my-form-container').html(serverResponse).find('#my_file_element').MultiFile(); 
    } 
}); 

, 당신의 코드에 대한 양식에 바인딩 것 같다 change 이벤트는 양식 내의 입력 요소에 바인딩되어야합니다. 당신이 시도 할 수 :

$('#my-form-container').delegate('#my_file_element', 'change',function(){  
    $(this).MultiFile(); 
}); 

공지 사항 나는 .delegate() 대신 .live()을 사용 후자는 jQuery를 1.7으로 감가 상각되어있다. jQuery를 사용하는 경우 1.7+ 당신은 이벤트 처리 위임 비슷한 방식으로 .on()를 사용할 수 있습니다 .delegate() 및 .on()에 대한 매개 변수의 순서가 다르다는 것을

$('#my-form-container').on('change', '#my_file_element', function(){  
    $(this).MultiFile(); 
}); 

공지 사항. .on()에 대한

• 문서 : .delegate()에 대한 http://api.jquery.com/on
• 문서 : http://api.jquery.com/delegate 당신이 AJAX 요청을 (당신이 당신의 예에 따라하는) 콜백 함수 내에서 이벤트 바인딩을 설정하는 경우

, 이벤트 위임을 사용할 필요가없는 경우 DOM에 추가 한 후에 요소에서 직접 플러그인을 실행할 수 있습니다.

$("#adminarea").load("http://" + hostname + "/" + compdir + "/modules/core/newticket 
       /newticket.php", function(){ 
       $('#my_file_element').MultiFile(); 
       addNewTicketValidation(); 
    });