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); 
    });    
}); 

委派事件具有以下优势：他们可以处理来自子孙元素事件将在稍后添加到文档中。通过选择在委托事件处理程序附加时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序的需要。该元素可以是模型 - 视图 - 控制器设计中的视图的容器元素，例如，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此在不等待文档准备就绪的情况下在其中附加事件是安全的。

来源：https://api.jquery.com/on/