Javascript jquery动态创建元素，但单击事件不起作用

任何jQuery帮助都将不胜感激。我用jquery创建了两个对象（相同）。一个在文档打开时加载（附加到body标记），另一个在按钮单击事件中也附加到body标记。当我单击第一个按钮时，它会触发一条警告消息，但第二个按钮不会（我希望它也会触发）。我的代码中包含了JSFIDLE链接

我的代码：

<label for="" id="Label01" style="position:absolute;left:10px;top:15px;width:186px;height:23px;line-height:23px;z-index:8;">Button Created</label>

<label for="" id="Label02" style="position:absolute;left:190px;top:15px;width:186px;height:23px;line-height:23px;z-index:8;">Without Button</label> 

<label for="" id="Label03" style="position:absolute;left:30px;top:115px;width:150px;height:18px;line-height:18px;z-index:1;">Click on a image</label>

<input type="submit" id="Button1" value="Create Image" style="position:absolute;left:495px;top:100px;width:106px;height:35px;z-index:0;">

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> 
</script>    
<script>

var $i1;
var $circle;
var dot = "dot1";
var dot_btn = "dot2";

// next (3) lines will create circle image and append to body WITHOUT button 
 click event
 $i1 =$('<i/>').attr({ class: "far fa-dot-circle fa-2x" });
 $circle = $('<div/>').attr({ id: dot 
 }).css({"position":"absolute","left":"200px","top":"40px"}).append($i1);
 $("body").append($circle);


// button click to create another circle image
$("#Button1").click(function() {             // click event - triggers a 

alert("btn clicked");
var btnCircle;

$i1 =$('<i/>').attr({ class: "far fa-dot-circle fa-2x" });
btnCircle = $('<div>').attr({ id: dot_btn 
}).css({"position":"absolute","left":"10px","top":"40px"}).append($i1);

$('#dot2').bind('click', function() { });
$("body").append(btnCircle);

});      


// NOTE only "dot1" works (without creation using the button click jquery 
  code)
$("#dot1").on("click",function() {
   alert("dot1 clicked");
});


$("#dot2").on("click",function() {
   alert("dot2 clicked");
});

</script>   

按钮已创建
无按钮
单击图像
var$i1；
var$circle；
var dot=“dot1”；
var dot_btn=“dot2”；
//下一（3）行将创建圆形图像，并附加到不带按钮的主体上
点击事件
$i1=$（''）.attr（{class:“远fa点圆fa-2x”}）；
$circle=$（''）.attr（{id:dot
}).css（{“position”：“absolute”，“left”：“200px”，“top”：“40px”}）；
$（“正文”）。追加（$circle）；
//按钮单击以创建另一个圆图像
$（“#按钮1”）。单击（函数（）{//单击事件-触发
警报（“btn点击”）；
var btnCircle；
$i1=$（''）.attr（{class:“远fa点圆fa-2x”}）；
btnCircle=$（''）.attr（{id:dot_btn
}).css（{“position”：“absolute”，“left”：“10px”，“top”：“40px”}）；
$（'#dot2'）.bind（'click'，function（）{}）；
$（“正文”）。追加（btnCircle）；
});      
//注意：只有“dot1”起作用（不使用按钮单击jquery进行创建）
代码）
$（“#dot1”）。在（“单击”，函数（）{
警报（“点击dot1”）；
});
$（“#dot2”）。在（“单击”，函数（）上）{
警报（“点击dot2”）；
});

以下是JSFIDLE链接：

---

提前感谢您的帮助。

我认为您最好克隆您的对象-这会复制整个过程，包括您希望带来的任何事件和/或数据

只是在你的小提琴上做的，很管用

$("#Button1").click(function() {      
  $newObject = $( $firstObject ).clone().css( 'left', '10px' ).appendTo( 'body' );
  $( $newObject ).click( function() {
  alert( 'hey there!' );
  });
}); 

将代码从

$("#dot2").on("click",function() {
   alert("dot2 clicked");
});

到

---

参考：

可能是比我的更干净的解决方案！非常感谢。效果很好。

$(document).on("click", "#dot2" ,function() {
   alert("dot2 clicked");
});