2

我有这个 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();
});
4

3 回答 3

4

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

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

           // something else
        }
});
于 2013-06-27T17:37:58.683 回答
0

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

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

演示

于 2013-06-27T17:41:41.667 回答
0

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

代替：

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

利用：

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

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

您的演示已更改

于 2013-06-27T18:09:27.260 回答