Javascript 添加和编辑div的文本-按钮单击事件

我正在使用div元素和jquery。我能够创建一个新的div并通过一个on-button-click事件追加文本。由于jqueryui插件，创建的每个div都有可拖动的属性。此外，我还可以通过onclick事件删除单个div。但我遇到了这个实现问题：因为我能够通过单击按钮将文本附加到div中。如何编辑以前创建的div的文本

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

/**删除新创建的div**/
$（“.remove”）。单击（函数（）{
$（“.draggable”）.remove（）；
});
var z=1；
$（“#按钮”）。单击（函数（e）{
/**使div可拖动**/
$('', {
类：“可拖动的ui小部件内容”，
html:“[X]”+$（“textarea”）.val（）+“”，
附录：'.middle side'，
可拖动：{
包含：'父'，
开始：功能（事件、用户界面）{
$（this.css（'z-index'，++z）；
}
}
}).addClass（“安置”）；
/**包含可拖动的div**/
$（'.middle side'）.parent（）.mousemove（函数（e）{
var offset=$（this.offset（）；
var relX=e.pageX-offset.left；
var relen=e.pageY-offset.top；
$（'.placement'）.css（{'top'：relY+30，'left'：relX+10，'position'：'absolute'}）；
})
});
$（'body'）。在（'click'，'.draggable.close'，函数（）上{
$（this）.closest（'.draggable'）.remove（）；
});

HTML

我会为每个添加的div添加一个双击事件监听器，然后当事件被触发时，您会获得div的文本并将其添加到文本区域内，当用户单击按钮时，将按钮的文本从“adddivwithtext”更改为“updatecontentofthediv”，将相关div的文本替换为文本区域内的文本

我会向每个添加的div添加一个双击事件侦听器，然后在触发事件时，获取div的文本并将其添加到文本区域内，将按钮的文本从“添加div with text”更改为“更新div的内容”，当用户单击按钮时，您将相关div的文本替换为文本区域内的文本

我将向添加的每个div添加一个双击事件侦听器，然后在触发事件时，您将获取div的文本并将其添加到文本区域内，将按钮文本从“Adddivwithtext”更改为“更新div的内容“，当用户单击按钮时，您将相关div的文本替换为文本区域内的文本

我将向添加的每个div添加一个双击事件侦听器，然后在触发事件时，您获取div的文本并将其添加到文本区域内，将按钮的文本从“Adddivwithtext”更改为“更新div的内容”，当用户单击按钮时，您将用文本区域内的文本替换相关div的文本，因为您已经在使用jQuery ui-使用对话框怎么样

下面是一个（未设置样式的）示例。正如建议的那样，我使用了

dblclick（）

事件：

|

---

既然您已经在使用jQueryUI，那么使用对话框呢

下面是一个（未设置样式的）示例。正如建议的那样，我使用了

dblclick（）

事件：

|

---

既然您已经在使用jQueryUI，那么使用对话框呢

下面是一个（未设置样式的）示例。正如建议的那样，我使用了

dblclick（）

事件：

|

---

既然您已经在使用jQueryUI，那么使用对话框呢

下面是一个（未设置样式的）示例。正如建议的那样，我使用了

dblclick（）

事件：

|

---

使用类似Angularjs的东西。使用类似Angularjs的东西。使用类似Angularjs的东西。使用类似Angularjs的东西。嗯，不确定我是否完全遵循。你能给我一个关于JSFIDDLEhm的片段吗？不确定我是否完全遵循JSFIDDLEhm的片段吗？你能给我一个关于JSFIDDLEhm的片段吗jsfiddle上的一个片段嗯，不确定我是否完全听懂了。你能给我一个jsfiddle上的片段吗

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

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

    }
);