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

事件delagation ...

如果使用.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()信息頁面。