jQuery: how to apply an effect to a parent element only when the child element hasn't been clicked?

Question

I trying to create an "edit in place" table cell. You click an edit link, and a text area appears in its place. I also only want to display the edit link when I hover over the table row. The problem I'm having with the following code is that the edit link always appears when you hover over the table row. How can I make it so that the hiding/showing, only happens when you are not currently editing.

HTML:

<td><a class="edit">Edit</a> $100</td>

jQuery:

$(document).ready(function(){

    $('a.edit').hide();

    $('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            $(this).find('a.edit').hide();
        }
    );

    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).hide();
        $(this).after('<input type="text" style="width:100%;" />');
    });
});

Answer 1

Use a variable in the hover function, that controls when is in edit mode.

For example, you could use condition verifying that $('input',).length>0.

That is to say verifying if it exists the input filed already.

Here you have what I say: http://jsfiddle.net/dactivo/L4zZw/

Answer 2

I'd probably do the hover in CSS. No need for javascript there. If you need to support IE6 with this feature, I'd make the javascript conditional.

Then add a class to the <tr> in the click() handler when you create the <input>. The CSS can keep the link hidden for the <tr> with the class.

Example: http://jsfiddle.net/gmS46/

CSS

tr a.edit {
    display:none;
}
tr:hover a.edit {
    display:inline;
}
tr.hasInput a.edit {
    display:none;
}​

jQuery

$(document).ready(function(){
    $('a.edit').click(function(e){
        e.preventDefault();
        $(this).after('<input>').closest('tr').addClass('hasInput');
    });
});

Answer 3

Not a direct answer to your question, but I have used Jeditable in the past with success to accomplish the same thing: http://www.appelsiini.net/projects/jeditable

Answer 4

Things become much simpler if your cells are like this:

<td><a class="edit" href="#">Edit</a><span>$100</span></td>

The javascript needed:

$('tr').hover(
        function(){
            $(this).find('a.edit').show();
        },
        function(){
            var $a = $(this).find('a.edit');
            if (!$a.next().is('input'))
                $a.hide();
        }
    );

$('a.edit').click(function(){
    var $next = $(this).next();
    if ($next.is('input')){
        $('<span>').html($next.val()).replaceAll($next);
    } else {
        $('<input>').val($next.html()).replaceAll($next).focus();
    }
    return false;
});

You can check this live jsFiddle example.