Question

我编写了代码，当用户双击<td>元素时，我就是：

追加<input>

type="text"

为其添加值并在用户点击输入时更新

以下是我的问题：
如果用户双击<td>并点击其他<td>而未按Enter键，则需要将初始<td>的{{1}}重置为之前的值。

<input>

请帮帮我。我不想使用可编辑的数据表。

Answer 1

在您的情况下，您需要.stopPropagation()：http://jsfiddle.net/jFycy/

$(function () {
    $("#div table td").dblclick(function (e) {
       e.stopPropagation();      //<-------stop the bubbling of the event here
       var currentEle = $(this);
       var value = $(this).html();
       updateVal(currentEle, value);
    });
});

function updateVal(currentEle, value) {
  $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
  $(".thVal").focus();
  $(".thVal").keyup(function (event) {
      if (event.keyCode == 13) {
          $(currentEle).html($(".thVal").val().trim());
      }
  });

  $(document).click(function () { // you can use $('html')
        $(currentEle).html($(".thVal").val().trim());
  });
}

而是点击body点击document或html上的活动，这是所有其他元素的父元素。

Answer 2

修正了最后的答案。通过检查谁触发了事件我可以防止输入上的双击问题。

另外，使用.off（'click'）你不会遇到问题，你更新的每个td都会在最后一次更改之前。

$(function () {
    $(".inner").dblclick(function (e) {
        if($(event.target).attr('class')!="thVal")
            {
                e.stopPropagation();
                var currentEle = $(this);
                var value = $(this).html();
                updateVal(currentEle, value);
        }
    });
});

function updateVal(currentEle, value) {
    $(document).off('click');
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".thVal").val());
        }
    });

    $(document).click(function () {

            if($(event.target).attr('class')!="thVal")
            {
                $(currentEle).html($(".thVal").val());
                $(document).off('click');
            }

    });

}

Answer 3

我知道这是一个古老的主题......但是由于输入上的点击事件，我在这里发布的答案没有用，我接受了答案并对其进行了修改

$(".daily-signals > tbody > tr > td").dblclick(function (e) {
    e.stopPropagation();      //<-------stop the bubbling of the event here
    var currentEle = $(this);
    var value = $(this).html();
    console.log('fire!');
    updateVal(currentEle, value);
});

function updateVal(currentEle, value) {
    $(currentEle).html('<input class="thVal" type="text" value="' + value + '" />');
    var thVal = $(".thVal");
    thVal.focus();
    thVal.keyup(function (event) {
        if (event.keyCode == 13) {
            $(currentEle).html(thVal.val());
            save(thVal.val());
        }
    });

    thVal.focusout(function () {
        $(currentEle).html(thVal.val().trim());
        return save(thVal.val();
    });

}

function save(value) {
    console.log(value);
}

保存功能将发出ajax请求

双击Jquery时如何编辑和更新值

3 个答案: