Question

I’m trying to append some html stuff, and I was wondering how come when I try to write some jquery function, that element that was just appended won’t work?

For instance, if I had a list of text and when you click on something, that list will populate with some sort of .append(‘more text’) to that list. Then if I have written some jquery function saying when hovering over that text, it won’t work. It will only work on text that was already populated before the append.

I hope my example clarifies my question?

Thanks for your help!

Answer 1

use jQuery’s live() method instead of the regular event handler. For example:

$('#myelement > *').live('mouseenter', function(evt) {
    $(this).addClass('hovered');
}).live('mouseleave', function(evt) {
    $(this).removeClass('hovered');
})

now, when you do this

$('#myelement').append( '<div>More Stuff</div>' );

the newly added div will get the mouseenter and mouseleave events as you wanted.