Question

单击ADD时，会向Container添加一些DIV。 此DIV包含两个div - MENU div和 EDIT div。

焦点编辑 div - 我想用TEXTAREA 替换此EDIT Div，并将EDIT DIV中的文本插入此TEXTAREA。比键入一些文字和模糊我希望用DIV替换TEXTAREA - 并将TEXTAREA的新编辑文本插入此EDIT DIV。

但我有两个问题：

通过定位。来自MENU的文本正在插入TEXTAREA，MENU DIV消失。
当我第一次使用doubleclick来改变DIV和TEXTAREA时，下次只需点击即可。为什么以及如何解决它？

jsFIDDLE DEM

HTML

<div id="add" style="background:yellow; width:100px;"> add new </div>
<div id="container"> </div>

JQUERY

function handler4(){
    var edited_DIV = $(this);
    $(edited_DIV).live({
        click: function() {
            if ($(this).children('textarea').length === 0) {
                var text_from_DIV = $(edited_DIV).find("#edit_div").text();
                $(this).html("<textarea class='inputbox' >"+text_from_DIV+"</textarea>");
                $("textarea.inputbox").focus();
                $("textarea.inputbox").blur(function() {
                    var text_from_TEXTAREA = $(this).val();
                    $(edited_DIV).text(text_from_TEXTAREA);
                });
            }
        }
    });
}


$("#add").on({
   click: function(e) {
        var timestamp = Date.now();
        var posx = Math.floor(Math.random() * 400);
        var posy = Math.floor(Math.random() * 400);
        $('#container').append(function() {
            return $('<div class="add_to_this" id="' + timestamp + '" style="left:' + posx + 'px; top:' + posx + 'px; "><div id="edit_div"><div id="menu" style="color:red;"><b> MENU </b></div>Click here to edit</div></div>').dblclick(handler4).draggable({
                containment: "#container",
                scroll: false,
                cursor: 'lock',
                opacity: 0.55,
                grid: [2, 2]
            }).resizable();
        });
    }
});

Answer 1

您可以尝试这样example

的javascript：

$("#edit").live("click",function(){
    $(".inputbox").val($("#menu").text()).show();
    $("#menu").hide();
    $("#save").show();
    $(this).hide();
});

$("#save").live("click",function(){   
    $("#menu").show();
    $("#menu b").html($(".inputbox").val());
    $(".inputbox").hide();
    $("#edit").show();
    $(this).hide();    
});

Answer 2

对于第2点：

当我第一次使用doubleclick来改变DIV和TEXTAREA时，下次只需点击即可完成。为什么以及如何解决它？

这是因为在你的代码中你在div上挂钩双击事件并且在该事件的实现中（handler4）你绑定了单击事件，导致单击时运行该功能

对于第1点：

有了定位。来自MENU的文本正在插入到TEXTAREA和 MENU DIV消失。

嗯，那是因为你正在使用div的文本，菜单在div中

以下是您修改后的功能。

function handler4() {
    var edited_DIV = $(this);
    if ($(this).children('textarea').length === 0) {
        var text_from_DIV = $(edited_DIV).find("#edit_div").clone().children().remove().end().text();
        var menu = $(this).find("#edit_div").find('#menu');
        $(this).find("#edit_div").text('').append(menu).append("<textarea class='inputbox' >" + text_from_DIV + "</textarea>");
        $("textarea.inputbox").focus();
        $("textarea.inputbox").dblclick(function (event) {
            return false;
        });
        $("textarea.inputbox").blur(function () {
            var text_from_TEXTAREA = $(this).val();
            $(edited_DIV).find("#edit_div").text(text_from_TEXTAREA).prepend(menu);
        });
    }
}

我删除了额外的点击处理程序并进行了一些修改以保持菜单不变。

以下是fiddle

编辑：在文本区域添加双击事件以停止传播到父div的双击事件

用TEXTAREA替换另一个DIV中的DIV，编辑文本并替换回来

2 个答案: