Replace Div Inside Another Div With Textarea, Edit Text And Replace Back

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

Solution 1:

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

Solution 2:

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.

functionhandler4() {
    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) {
            returnfalse;
        });
        $("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