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

Если вы используете .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().