jQuery: how to apply an effect to a parent element only when the child element hasn't been clicked?
<p>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.</p>

<p>HTML:</p>

<pre><code>&lt;td&gt;&lt;a class="edit"&gt;Edit&lt;/a&gt; $100&lt;/td&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(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('&lt;input type="text" style="width:100%;" /&gt;');
    });
});
</code></pre>
