.live() vs. .on()

Testing out the .on() replacement method for 'hover' being bound to generated content.

by Dylan Schadeck

HTML

<div id="wrapper"></div>

CSS

#wrapper { background: #999; height: 500px; padding-top: 100px; }
.object { width: 200px; height: 200px; background: #6c6;margin: 0 auto; padding-top: 1em; color: #fff; text-align: center; line-height: 1em; box-shadow: inset 0 0 400px 0 #383, 2px 2px 8px #333, 0 0 300px 0 #333; box-sizing: border-box; text-shadow: 1px 1px 1px #333; }
.object div { background: #363; margin: 0 1em .25em 1em; padding: .25em 0; }

JavaScript

var live, on;
$('#wrapper').append(
    '<div class="object">' +
        '<h2>.live() vs. .on()</h2>' +
        '<p>for generated content</p>' +
        '<p><em>hover over me</em><p>' +
        '<div>live = <span class="live">' + live + '</span></div>' +
        '<div>on = <span class="on">' + on + '</span></div>' +
    '</div>'
);

$('.object').live(
    { mouseenter: function() {
        $('.live').html('in');
    }, mouseleave: function() {
        $('.live').html('out');
    }
});

$('body').on(
    { mouseenter: function() { 
        $('.on').html('in');
    }, mouseleave: function() {
        $('.on').html('out');
    }
},'.object');