Replace DIV inside another DIV with TEXTAREA, edit

问题:

When you click on ADD, some DIV is added to the Container. This DIV contain two divs - MENU div and EDIT div.

On focus EDIT div - I want to replace this EDIT Div with TEXTAREA and insert text from EDIT DIV to this TEXTAREA. Than type some text and on blur I want replace TEXTAREA back with DIV - and insert new edited text from TEXTAREA to this EDIT DIV.

But I have two problems :

1. With targeting. Becouse text from MENU is inserting to TEXTAREA and MENU DIV disappears.
2. When I use doubleclick for the first time to change DIV and TEXTAREA, next time it is happening just on simple click. Why and how to fix it ?

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

回答1:

For point 2:

When I use doubleclick for the first time to change DIV and TEXTAREA, next time it is happening just on simple click. Why and how to fix it ?

It is because in your code you are hooking a double click event on div and in the implementation of that event (handler4) you are binding single click event which causes the functionality to run on single click

For Point 1:

With targeting. Becouse text from MENU is inserting to TEXTAREA and MENU DIV disappears.

Well, that is because you are taking text of the div and menu is inside that div

Below is the modified function for you.

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

I have removed the extra click handler and made some modifications to keep the menu intact.

Here is the fiddle

EDIT: added double click event on text area to stop propagation to parent div's double click event

回答2:

You can try like this 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();    
});