my live() method goes crazy
<p>first some code:</p>

<p>I have many elements like that:</p>

<pre><code>&lt;section class="item&gt;
     &lt;div class="caption"&gt;
     &lt;/div&gt;
&lt;/section&gt;
</code></pre>

<p>the "caption" is hidden, when you go on the "item" the "caption" came in.</p>

<p>I did this before with hover() and worked fine, but now I need to have it live(), because I'm adding some more "item"s with an ajax() call.</p>

<p>What's happening now is that when "caption" is showed, it takes precedence over item, because it is styled as absolute. Here some other code:</p>

<pre><code>.caption {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: none;
}
</code></pre>

<p>I like this style because sometimes my "item" can have any size, and "caption" just follows it. But let's go on.</p>

<p>Symptoms: when I mouse-enter on my "item" the caption shows, then instantly goes away, then goes in, then goes out. Like mad. I know why, I suppose it's because my "caption" even if lives into "item" takes precedence, so "item" is no more in mouse-enter event. So "caption" leaves, and "item" fires another mouse-enter. And so on, until the end of time.</p>

<p>Here is my javascript, how can I say to live() to behave like it did before with hover()?</p>

<pre><code>$('.item').live({
    mouseenter : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 1,
            height: 'toggle'
            }, 'fast');

    },

    mouseout : function() {
        $(this)
        .find('.caption')
        .animate({
            opacity: 0,
            height: 'toggle'
        }, 'fast');     

    }

})  
</code></pre>

<p>thank you!</p>
