jQuery - xhr 출력 내의 버튼에 함수 바인딩

Question

xhr 요청으로 일부 정보를 출력합니다. 이 출력에는 버튼이 있습니다. 필자는 함수 (전자 메일 보내기)를 바인딩하려고하지만 어떤 이유로 그럴 수 없습니다.

분명히 jQuery가 포함되어 있으며 콘솔에서 오류가 발생하지 않습니다. 이미 몇 가지 옵션을 시도했습니다!

버튼 HTML :

$(document).ready(function(){ 
 
    $('#sendraportemail').click(function(){ 
 
    var uroemail = $('#uroemail').val(); 
 
    console.log(uroemail); 
 
    });    
 
}); 
 

 
(function() { 
 
    $('#sendraportemail').click(function(){ 
 
    var uroemail = $('#uroemail').val(); 
 
    console.log(uroemail); 
 
    });    
 
}); 
 

 
$('.sendraportemail').click(function(){ 
 
    var uroemail = $('#uroemail').val(); 
 
    console.log(uroemail); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="btn btn-primary sendraportemail" id="sendraportemail">SEND E-MAIL</button>

내가 $로 바인딩 시도 ('#의 sendraportemail') 또는 $ ('sendraportemail.'). 내가 뭘 잘못 했니? 도움이 매우 감사.

Answer 1

는 동적 document.ready 이후에 추가되는 요소에 이벤트를 캡처 할 필요가있는 바인딩 위임 된 이벤트를 사용해야합니다

$(document).ready(function(){ 
    $(document).on('click', '#sendraportemail', function(){ 
    var uroemail = $('#uroemail').val(); 
    console.log(uroemail); 
    });    
}); 

위임 된 이벤트

이 들이 하위 요소의 이벤트를 처리 할 수있는 장점 나중에 문서에 추가됩니다.. 위임 된 이벤트 핸들러가 연결될 때 존재하도록 보장 된 요소를 선택하면 위임 된 이벤트를 사용하여 이벤트 핸들러를 자주 연결하고 제거 할 필요가 없습니다. 이 요소는 예를 들어 Model-View-Controller 디자인의 뷰 컨테이너 요소이거나 이벤트 처리기가 문서의 모든 버블 링 이벤트를 모니터링하려는 경우 문서 일 수 있습니다. 문서 요소는 다른 HTML을로드하기 전에 문서 머리글에서 사용할 수 있으므로 문서가 준비 될 때까지 기다리지 않고도 이벤트를 첨부 할 수 있습니다.

출처 : https://api.jquery.com/on/는