Appending Text And Editing Text Of Div - Button Click Event

I am working with div elements and jquery. I am able to create a new div and append text through an on button click event. Each div created has draggable property thanks to a jquer

Solution 1:

As you are already using jQuery-ui - what about using a dialog?

Here is an (unstyled) example. As Geraud Mathe suggested I used the dblclick() Event:

JSFiddle | Dialog Doc

theDivJustAdded.dblclick(function() {
        var divElem = $(this);
        dialog = $( "#dialog-form" ).dialog({
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Save": function() {
                    divElem.find('.text').text($( "#dialog-form input" ).val());
                    dialog.dialog( "close" );
                },
                Cancel: function() {
                    dialog.dialog( "close" );
                }
            }
        });

    }
);

Solution 2:

I would add a double click event listener to each div that is added, then when the event is triggered, you get the text of the div and add it inside the textarea, change the text of the button from "Add Div with Text" to "Update content of the div", when the user clicks on the button , you replace the text of the related div with the one that is inside the textarea