div的附加文本和编辑文本 - 按钮单击事件答案

【问题标题】：Appending text and editing text of div - button click eventdiv的附加文本和编辑文本 - 按钮单击事件
【发布时间】：2014-08-31 16:32:02
【问题描述】：

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

【问题讨论】：

改用Angularjs之类的东西。

标签： javascript jquery jquery-ui

【解决方案1】：

既然您已经在使用 jQuery-ui - 那么使用对话框呢？

这是一个（无样式的）示例。正如Geraud Mathe 建议的那样，我使用了dblclick() 事件：

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

我会为每个添加的 div 添加一个双击事件侦听器，然后当事件被触发时，您会获取 div 的文本并将其添加到 textarea 中，将按钮的文本从“添加 div 与Text" 到 "Update content of the div"，当用户单击按钮时，您将相关 div 的文本替换为 textarea 内的文本

【讨论】：

嗯不确定我是否完全关注你能不能在 jsfiddle 上给我一个 sn-p