Question

I have a DOM element added with .append() and something like:

myObject.live({
     mouseenter: function() { // do something

and this works fine, but as jQUery 1.7 suggests, I’ve changed it with on(). But with on() the same function doesn’t work. Should I go with live() or there’s something I’m missing with on() to make it work with new DOM nodes?

As the jQuery docs states, those functions are quite similar:

live();

$("p").live({
click: function() {
$(this).after("<p>Another paragraph!</p>");
},
 mouseover: function() {
 $(this).addClass("over");
  },
    mouseout: function() {
     $(this).removeClass("over");
   }
});

on();

$("div.test").on({
 click: function(){
$(this).toggleClass("active");
  },
 mouseenter: function(){
$(this).addClass("inside");
 },
 mouseleave: function(){
  $(this).removeClass("inside");
 }
});

the latter will not work with a new node added with .append(); is this right?

Answer 1

$(document).on('mouseenter', myObject, function() {
    //do something
});