jQuery：如何仅在子元素没有'；没有点击？

我正在尝试创建“就地编辑”表格单元格。单击编辑链接，文本区域将显示在其位置。我还只想在将鼠标悬停在表格行上时显示编辑链接。下面代码的问题是，当您将鼠标悬停在表行上时，编辑链接总是出现。如何使隐藏/显示仅在您当前未编辑时发生

HTML:

编辑$100

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%;" />');
    });
});

$（文档）.ready（函数（）{
$（'a.edit'）.hide（）；
$（'tr'）。悬停(
函数（）{
$（this.find（'a.edit'）.show（）；
},
函数（）{
$（this.find（'a.edit'）.hide（）；
}
);
$（'a.edit'）。单击（函数（e）{
e、 预防默认值（）；
$（this.hide（）；
$（本）。在（''）之后；
});
});

在悬停功能中使用一个变量，控制何时处于编辑模式

例如，您可以使用条件验证$（'input'，）.length>0

也就是说，验证输入字段是否已经存在

这就是我说的：

---

我可能会在CSS中执行

悬停操作。那里不需要javascript。如果您需要使用此功能支持IE6，我会将javascript设置为有条件的

然后在创建
时，将类添加到
单击（）处理程序中的
中。CSS可以为类的
隐藏链接

示例：

CSS

jQuery

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

$（文档）.ready（函数（）{
$（'a.edit'）。单击（函数（e）{
e、 预防默认值（）；
$（this）.after（''）.closest（'tr'）.addClass（'hasInput'）；
});
});
不是对你问题的直接回答，但我在过去成功地使用了Jeditable来完成同样的事情：
如果你的细胞是这样，事情会变得简单得多：

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

100美元

所需的javascript：

$('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;
});

$（'tr'）。悬停(
函数（）{
$（this.find（'a.edit'）.show（）；
},
函数（）{
var$a=$（this.find（'a.edit'）；
如果（！$a.next（）.is（'input'））
$a.hide（）；
}
);
$（'a.edit'）。单击（函数（）{
var$next=$（this.next（）；
if（$next.is（'input'））{
$（''）.html（$next.val（））.replaceAll（$next）；
}否则{
$（''）.val（$next.html（））.replaceAll（$next.focus（）；
}
返回false；
});

您可以检查此项。
您想如何退出编辑模式？我喜欢您使用CSS实现悬停效果的想法，因为它不一定与javascript相关。如果禁用javascript，悬停效果仍然会发生。我还意识到，如果我用javascript隐藏链接（因为它应用了display:none-style-inline），我不需要向该表行添加类。
<td><a class="edit" href="#">Edit</a><span>$100</span></td>

$('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;
});