jquery - Jquery 2.0 mouseenter 不适用于新元素

Question

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

<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>

http://jsfiddle.net/8kSMe/

Answer 1

事件延迟...

如果使用.on()得当，它会起作用：

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

http://jsfiddle.net/8kSMe/1/

使用.on()您使用的方式就像使用$('.btn').click()wich 对静态元素有好处。但是当您的目标被动态添加时，您需要定位最近的静态父级（在这种情况下document）并传递动态选择器（.btn）。

我来宾 jQuery 可以比我更好地解释它。去查看jQuery .on()信息页面中的Direct and delegated events部分。