jQuery hover live()?

I'm learning jQuery and I'm not sure how to "inform" the script that something had happened.

For example, when I hover a .container it adds "grey" class to it. But when I want to do anything with the newly created "grey" div, then nothing works. I've heard about live() function, but I'm not sure that's the good way?

   jQuery('.container').hover(function() {
        jQuery(this).animate({opacity: '0.5'},1000);开发者_如何学Python
        jQuery(this).addClass('grey');
    });

    jQuery('.grey').hover(function() {
        jQuery(this).animate({opacity: '0'},100);
    });

Live: http://jsfiddle.net/n5kpM/

From jQuery 1.7+ .live() is deprecated, and .delegate() has been superseded by the .on() method.

Use .on() and .off() in place of .live(), and .die(). Use .on() in place of .delegate().

Converting older code is straightforward as explained here.

live is exactly what you want. Since the .grey element doesn't exist at the time you are calling hover, it will not work the way you have it. Using live will let you apply the handlers before the element exists.

One thing to note though, you can't use live directly with hover. You need to do the 2 events separately. jQuery live hover

live is called like this:

$(...).live('mouseenter', function() { ... });