div的附加文本和编辑文本-按钮单击事件 [英] Appending text and editing text of div - button click event
问题描述
我正在使用div元素和jquery.我能够创建一个新的div并通过按钮单击事件附加文本.借助于jqueryui插件,创建的每个div都具有可拖动属性.另外,我也可以通过onclick事件删除单个div.但是我遇到了这个实现问题:由于我能够在单击按钮时将文本附加到div上.如何编辑以前创建的div的文本? JSFIDDLE
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>
推荐答案
由于您已经在使用jQuery-ui,如何使用对话框?
As you are already using jQuery-ui - what about using a dialog?
这是一个(未样式化的)示例.正如 Geraud Mathe 所建议的那样,我使用了dblclick()
事件:
Here is an (unstyled) example. As Geraud Mathe suggested I used the dblclick()
Event:
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" );
}
}
});
}
);
这篇关于div的附加文本和编辑文本-按钮单击事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!