클릭 핸들러가 작동하지 않음

Question

클래스가 PhotoUploadSubmit 인 버튼이 몇 개 있습니다. 버튼을 클릭하면 맞춤형 클릭 핸들러가 형제 요소 등을 확인하는 데 사용됩니다. 클릭 핸들러가 작동하지 않습니다. debugger 중단 점은 치지 않으며 전 완전히 당황 스럽습니다. 나는 무엇을 시도했다 측면에서

<div class="formDataContext"> 
    <input type="file" name="ImageData" style="display:none" /> 
    <button class="PhotoUploadSubmit"><i class="fa fa-camera fa-5x"></i></button> 
</div> 

<script type="text/javascript"> 

$(function() { 
    $(".PhotoUploadSubmit").on("click", function() { 
     debugger; 
     var currentFormDataContext = $(this).closest(".formDataContext"); 
     console.log(currentFormDataContext); 
     var FileInput = currentFormDataContext.find("input:file")[0]; 
     console.log(FileInput); 
     $(FileInput).click(); 
    }); 

    $("input:file").change(function() { 
     var currentFormDataContext = $(this).closest(".formDataContext"); 
     uploadImage(currentFormDataContext); 
    }); 
}); 

</script> 

, 나는 document.ready 외부의 클릭 핸들러를 넣어 시도했습니다, 나는 debugger; 키워드를 사용하여 시도했다, 난 브레이크 포인트를 설정하려고했습니다. 콘솔 오류가 없습니다.

Answer 1

buttons은 동적으로 추가되므로 delegate이 될 수 있습니다. 예 :

$("body").on("click", '.PhotoUploadSubmit', function() { 
    debugger; 
    var currentFormDataContext = $(this).closest(".formDataContext"); 
    console.log(currentFormDataContext); 
    var FileInput = currentFormDataContext.find("input:file")[0]; 
    console.log(FileInput); 
    $(FileInput).click(); 
});