无法对jquery加载的元素应用jquery

Question

当我点击按钮2时，什么也没有发生。它如何像我写的那样运行。我的代码：

<input type="button" id="btn1" value="Button 1"><br><br> 
<div id="display"></div> 
<script> 
    $(document).ready(function(){ 
     $("#btn1").click(function(){ 
      $("#display").append('<input type="button" id="btn2" value="Button 2">'); 
     }); 
     $("#btn2").click(function(){ 
      alert("Message!"); 
     }); 
    }); 
</script> 

Answer 1

您需要使用事件代表团动态创建的元素，像这样：

$("body").on("click", "#btn2", function(){ 
    alert("Message!"); 
}); 

FIDDLE

Answer 2

您需要使用事件委托添加事件侦听器可以动态创建的元素。

$(document).ready(function(){ 
 
     $("#btn1").click(function(){ 
 
      $("#display").append('<input type="button" id="btn2" value="Button 2">'); 
 
     }); 
 
     $(document).on('click','#btn2',function(){ // document or any container of btn2 
 
      alert("Message!"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="btn1" value="Button 1"><br><br> 
 
<div id="display"></div>