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 jqueryui plugn. Also, I am able to delete individual divs through an onclick event as well. But I am running into this implementation issue: Since I am able to append text to a div on a button click. How can edit the text of a previously created div? JSFIDDLE

Jquery

/** Remove newly created div **/
$(".remove").click(function(){
    $(".draggable").remove();
});

var z = 1;
$('#button').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'draggable ui-widget-content',
        html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>',
        appendTo: '.middle-side',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    }).addClass('placement');


    /** Contain draggable div **/
    $('.middle-side').parent().mousemove(function(e){
        var offset = $(this).offset();
        var relX = e.pageX - offset.left;
        var relY = e.pageY - offset.top;
        $('.placement').css({'top': relY + 30,'left': relX + 10, 'position': 'absolute'});
    })

});

$('body').on('click', '.draggable .close', function () {
    $(this).closest('.draggable').remove();
});

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea>
<br/>
<input type="button" id="button" value="Add Div with Text" />
<br/>
<div>
    <div class="middle-side empty"></div>

</div>

回答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" );
                }
            }
        });

    }
);

回答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

来源：https://stackoverflow.com/questions/25594009/appending-text-and-editing-text-of-div-button-click-event

标签

javascript

jquery

jquery-ui