Question

我已关注表格编辑功能：

$(function () {
$("td").dblclick(function () {
    var OriginalContent = $(this).text();

    $(this).addClass("cellEditing");
    $(this).html("<input type="text" value="&quot; + OriginalContent + &quot;" />");
    $(this).children().first().focus();

    $(this).children().first().keypress(function (e) {
        if (e.which == 13) {
            var newContent = $(this).val();
            $(this).parent().text(newContent);
            $(this).parent().removeClass("cellEditing");
        }
    });

$(this).children().first().blur(function(){
    $(this).parent().text(OriginalContent);
    $(this).parent().removeClass("cellEditing");
});
});
});

其工作方式如下：http://www.ssiddique.info/demo/editable-table-using-jquery

如果我双击td一个输入被添加到单元格，不幸的是，如果我在输入中双击导致空输入，也会触发双击。

如何防止secong双击？或者仅当td不包含输入时才点击双击？

谢谢，

t book

Answer 1

防止事件向上传播DOM树。如下所示：

$(this).find('input').dblclick(function(e){
    e.stopPropagation(); 
});

JSFiddle

Answer 2

下面检查td是否为空：

$("td").on('dblclick',function () {
    if( $(this).html()!='' ) alert('content')
    else alert('no content')
});

这里是小提琴：http://jsfiddle.net/WSRF3/

所以在你的例子中，如果td没有内容，我会选择只执行代码：

$("td").on('dblclick',function () {
    if( $(this).html()!='' ) return; // do nothing
    // continue your code here...
});

jquery仅在不包含输入时允许td双击

2 个答案: