0

当您单击 ADD 时，一些 DIV 被添加到容器中。此 DIV 包含两个 div - MENU div 和EDIT div。

在焦点 EDIT div - 我想用 TEXTAREA 替换这个 EDIT Div并将文本从 EDIT DIV 插入到这个 TEXTAREA。比输入一些文本和模糊我想用 DIV 替换 TEXTAREA - 并将新的编辑文本从 TEXTAREA 插入到这个 EDIT DIV。

但我有两个问题：

  1. 有针对性。因为来自 MENU 的文本正在插入到 TEXTAREA 并且 MENU DIV 消失。
  2. 当我第一次使用双击来更改 DIV 和 TEXTAREA 时，下次只需单击即可。为什么以及如何解决它？

jsFIDDLE DEM

HTML

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

查询

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();
        });
    }
});
4

2 回答 2

2

你可以试试这个例子

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();    
});
于 2013-06-12T10:12:19.107 回答
1

对于第 2 点：

当我第一次使用双击来更改 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);
        });
    }
}

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

这是小提琴

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

于 2013-06-12T10:23:50.340 回答