Jquery 2.0 mouseenter不适用于新元素

嗨，我正在尝试在新添加的元素上添加事件，但它对我不起作用。请告诉我这个问题

<div class='btn'>Button</div>

<script>
$('.btn').on({
 click: function(){
   $(".btn:last").after("<div class='btn'>Button</div>"); //adding new element
},
mouseenter: function(){
 console.log("in");
},
mouseleave: function(){
  console.log("out");
}
});
</script>

按钮
$（'.btn'）。在({
单击：函数（）{
$（.btn:last”）.after（“按钮”）；//添加新元素
},
mouseenter:function（）{
控制台。登录（“登录”）；
},
mouseleave:function（）{
控制台。登录（“退出”）；
}
});

事件延迟

如果您正确使用

.on（）

，它会工作：

$(document).on({
  click: function(){
      $(".btn:last").after("<div class='btn'>Button</div>");
  },
  mouseenter: function(){
    console.log("in");
  },
  mouseleave: function(){
     console.log("out");
  }
}, '.btn');

$（文档）。在({
单击：函数（）{
$（“.btn:last”）。在（“按钮”）之后；
},
mouseenter:function（）{
控制台。登录（“登录”）；
},
mouseleave:function（）{
控制台。登录（“退出”）；
}
}“.btn”）；

使用

.on（）

您使用的方式就像使用

$（'.btn'）。单击（）

这对静态元素很好。但是，当动态添加目标时，您需要以最接近的静态父对象为目标（在本例中为

文档

）并传递动态选择器（

.btn

）

---

我认为jQuery比我解释得更好。查看信息页面中的“直接和委托活动”部分。

您好，谢谢：）。。你的代码运行正常，请解释一下这个代码。“我也使用了.on（），但它不起作用。”MohammadShahid补充了一点解释。