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()一样，这对静态元素有用。但是，当动态添加目标时，您需要定位最近的静态父级（在本例中为document）并传递动态选择器（.btn）。

我访客jQuery可以比我更好地解释它。请查看jQuery .on()信息页中的直接和委派活动部分。

Jquery 2.0 mouseenter不适用于新元素

1 个答案: