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デザインのビューのコンテナ要素、またはドキュメント内のすべてのバブリングイベントをイベントハンドラが監視したい場合はドキュメントです。 document要素は、他のHTMLをロードする前にドキュメントの先頭に置くことができるので、ドキュメントを準備するのを待たずにそこにイベントを添付することは安全です。

出典：https://api.jquery.com/on/