jQuery Doing a LIVE Focus click / blur event

I have a textarea. What I want to happen is when the user is focused in the textarea for it to grow to 4em, when the user is not focused in the textarea/blurred out, return it to the default 1em.

Here's what I have so far:

$('.comment_content').live('focus click', function() {
   $(this).addClass('grow');
}).live('blur', function() {
   $(this).removeClass('grow');
});

So that worked fine and dandy but here's the issue. A user can attach a file to a comment, something like:

<textarea type="text" class="comment_content"> </textarea>
<div id="attachfile">attach file</div>

The only exception I'd like to the above jQuery is that if the user clicks to attach a开发者_JAVA技巧 file then the removeClass should not run.

Any ideas?

Thanks

I'd put the removeClass function in a setTimeout code block of about 500 milliseconds. Have the code fire only if the attachfile element doesn't have a class of 'active'. Then, add an event handler to the attachfile element, that adds a class of 'active' on click.

$('.comment_content').live('focus click', function() {
   $(this).addClass('grow');
});

$("body").live("click focus", function(evt) {
    if (!$(evt.target).is('.grow, #attachfile'))
       $('.comment_content').removeClass('grow');
});

Update 16/01/11

Better understanding of the problem this morning and have created the following jsFiddle. http://jsfiddle.net/uc8Qv/

Rich