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

【问题标题】：clicking on a table cell reruns the jquery单击表格单元格重新运行 jquery
【发布时间】：2013-06-28 02:09:27
【问题描述】：

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

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

这是应该发生的事情：1）有人点击表格单元格，所有其他具有输入/文本区域的单元格都应该删除输入/文本区域并将文本放回单元格（工作），2）单击单元格应使用单元格中的文本填充输入/文本区域（作品）。最后，用户应该能够单击按钮并编辑输入/文本区域中的文本（不起作用，它会继续运行第 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();
});

【问题讨论】：

当事件已经冒泡到文档中时，e.stopPropagation(); 什么都不做。
我明白了，您的问题是保存和取消按钮不起作用，对吗？
@BradM 那么，我该怎么办？
@Derek 不，我无法编辑显示的文本字段中的文本
如果您突出显示文本，它可以工作，但如果我只是尝试点击，我就会看到问题。

标签： javascript jquery

【解决方案1】：

改为删除输入的单独点击事件并检查.editable click事件本身中的目标元素..

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

           // something else
        }
});

【讨论】：

【解决方案2】：

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

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

DEMO

【讨论】：

【解决方案3】：

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

代替：

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

用途：

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

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

Your demo changed

【讨论】：