Question

我有这个jsFiddle：http://jsfiddle.net/4wyDA/1/

我已将其设置为当您单击表格单元格时，它会向其添加一个文本框，但我遇到的问题是，一旦您单击表格单元格，您就无法编辑文本框中的文本尝试e.stopPropagation()，但这不起作用。

以下是应该发生的事情：1）有人点击表格单元格，所有其他具有输入/ textarea的单元格应该删除输入/ textarea并将文本放回单元格（工作），2）单击单元格应填充输入/ textarea与单元格中的文本（工作）。最后，用户应该能够单击按钮并编辑输入/ textarea中的文本（不起作用，它继续运行步骤1和2）。

$(".editable").click(function(e) {
    $(".editable").each(function() {
        if ($(this).has("input")) {
            var v = $(this).children("input.input, textarea").val();
            $(this).text(v);
        }
    });

    var type = $(this).attr("data-type");

    var val = $(this).text();
    if (type === "text" || type === "date") {
        str = '<input type="text" class="input" style="width: 100%;" value="' + val + '" /><br />';
    }
    str += '<input type="button" value="Save" />';
    str += '<input type="button" value="Cancel" />';

    $(this).html(str);
});

$(document).on("click", ".editable input", function(e){
    e.stopPropagation();
});

Answer 1

而是删除输入的单独click事件，并检查.editable click事件本身中的目标元素..

$(".editable").click(function (e) {
        if (!$(e.target).is('input')) {
           // your code when 
        }
        else {

           // something else
        }
});

Answer 2

您可以通过将以下代码添加到事件的开头来停止使用.editable类的元素删除输入：

$(".editable").click(function(e) {
    if (e.target.className === 'input')
       return;
    //rest of code

DEMO

Answer 3

建议：您是否可以将点击事件更改为双击？这将解决您的问题。我的意思是这样的：

而不是：

$(".editable").click(function(e) {

使用：

$(".editable").dblclick(function(e) {

当我看到可编辑的表格时，他们会使用双击。

Your demo changed

单击表格单元格重新运行jquery

3 个答案: