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

我正在使用div元素和jquery。我可以创建一个新的div，并通过点击按钮事件追加文本。得益于jqueryui plugn，创建的每个div都具有可拖动的属性。另外，我也可以通过onclick事件删除个人div。但我遇到了这个实现问题：因为我能够将文本附加到按钮上点击div。如何编辑以前创建的div的文本？ JSFIDDLE 附加文本和编辑文本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(); 
});

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>

来源

2014-08-31 Code_Ed_Student

使用类似Angularjs的东西代替。 – Erevald 2014-08-31 16:44:01

由于您已经在使用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"); 
       } 
      } 
     }); 

    } 
);

来源

2014-08-31 17:06:45 stefanr

我想补充一个双击事件监听器添加的每个格，然后当事件触发时，你得到的div的文本并将其添加到textarea中，将按钮的文本从“添加Div文本”更改为“更新div的内容”，当用户单击该按钮时，将相关div的文本替换为在textarea内

来源

2014-08-31 16:38:50

嗯不知道我是否完全关注你能否在jsfiddle上歪曲我的片段 – 2014-08-31 18:00:30

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

回答

相关问题