how to use on replace live (jQuery v2.0.3)

Question

//<div class="test"></div>
$(".test").append('<div class="single">Items</div>');//some function
$(".single").on({//when in lower version "live" works fine
mouseenter:function(){
console.log("mouseenter");
},
mouseout:function(){
console.log("mouseout");
},
click:function(){
console.log("click");
}
})

but in 2.0.3 "live" is undefined,but "on" seems not to get the event what's wrong,"on" is not more powerfull than "live"? what i suppose to do,thanks

Answer 1

what you need to do is to define a scope for .on like:

//<div class="test"></div>
$(".test").append('<div class="single">Items</div>');//some function
$(".test").on({
mouseenter:function(){
console.log("mouseenter");
},
mouseout:function(){
console.log("mouseout");
},
click:function(){
console.log("click");
}
}, ".single")

Answer 2

The event delegation syntax of on is $(static-ancestor-element).on(event, dynamic-element-selector, handler)

$(".test").append('<div class="single">Items</div>'); //some function
$(document).on({ //when in lower version "live" works fine
    mouseenter: function () {
        console.log("mouseenter");
    },
    mouseout: function () {
        console.log("mouseout");
    },
    click: function () {
        console.log("click");
    }
}, ".single")