Javascript/jQuery: mouseenter event not firing properly

I have a code like this

$('#singleColumn' + time).show(SHOW_COMPONENT_SPEED)
    .live('mouseenter', function() { $('#propertiesButtonSingle' + time).fadeIn(FADEIN_SPEED); })
    .live('mouseleave', function() { $('#propertiesButtonSingle' + time).fadeOut(FADEOUT_SPEED); });

which I'm using to show/hide a button when mouseenter/mouseleave events 开发者_如何学Goare fired on a box.

The problem is that my page is dynamic, i.e. I keep adding new HTML to the page using JQuery .html() function. What happes is that the mouse events are fired only for the last box I added (I add them by drag and dropping): pratically it works fine for the first box, if I add a second one the events are fired correctly for it but when I move the mouse over the first box nothing happens. If I add a third box the second one stops working too, etc...

The code I posted is for one kind of box, but for the other types it is pratically the same apart from the selector names.

take a look at .delegate() - http://api.jquery.com/delegate

you could bind events to an object higher up the DOM tree and listen ...