当我双击该卡时,将弹出对话框,然后可以创建动态复选框和注释。到现在为止还挺好。创建复选框或注释时,可以对其进行编辑或删除。
问题是创建一个注释并命名它时。 “Hallo”。然后,我要对其进行编辑,并将其命名为“Hallo World”,然后通过“获取值”按钮保存数据。当我打开同一张卡片时,注释仍命名为“Hallo”,而不是“Hallo World”。
我需要更新输入对象的commentString属性。我试图在标签元素上实现这一点:
$('<label />', {
id: 'comment' + id,
text: commentString
}).on('change', function () {
data1.commentString = $(this).val();
}).appendTo(div);
这行编辑功能:
element.children('input').change();
但这似乎行不通。
jQuery的:
function addComment(commentString) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var data1 = {
commentString: commentString
};
var div = $('<div />', { class: 'CommentStyle' });
$('<label />', {
id: 'comment' + id,
text: commentString
}).on('change', function () {
data1.commentString = $(this).val();
}).appendTo(div);
$('<br/>').appendTo(div);
var $Image = $('<img />',
{
"src": "/Pages/Images/alert.png",
"class": "CommentImage",
"for": "comment" + id
}).appendTo(container);
var d = new Date();
var $fulaDate = $('<div>' + d.getDate()
+ "-" + monthNames[d.getMonth()]
+ "-" + d.getFullYear()
+ "//" + d.getHours()
+ ":" + d.getMinutes()
+ '</div>').addClass('labelStyle').append(' ~').appendTo(div);
var $edit = $('<p />', {
class: 'edit',
text: 'Edit'
}).append(' ~').appendTo(div);
var $delete = $('<p />', {
class: 'delete',
text: 'Delete'
}).appendTo(div);
div.appendTo(container).focus();
container.data('comments').push(data1);
}
$('#submit').click(function () {
addComment($('#comments').val());
$('#comments').val("");
});
$('#divComments').on('click', '.edit', function () {
var element = $(this).parent()
var text = $(this).parents(".CommentStyle").find("label").text();
var input = $('<input id="attribute" value="' + text + '" />')
element.children('label,p').addClass('hidden').end().append(input);
input.select();
input.blur(function () {
var text = $('#attribute').val();
element.children('label').text(text);
element.children('.hidden').removeClass('hidden');
$('#attribute').remove();
element.children('input').val(text);
element.children('input').change();
});
});
Live Demo
最佳答案
问题在于data1
对象已附加到标签元素,该元素保留注释,但是当编辑注释时,新注释的值将发送到element.children('input')
,后者是编辑注释的输入。您想要的是将值发送到标签:
input.blur(function () {
var text = $('#attribute').val();
element.children('label').text(text);
element.children('.hidden').removeClass('hidden');
$('#attribute').remove();
element.children('label').val(text);
element.children('label').change();
});
为了更加准确,实际上您不应该在标签上使用
.val()
,该方法应在表单元素上使用。因此,更好的解决方案是在“更改”处理程序中使用.text()
值(在这里,再次将更改处理程序放置在标签上似乎是不自然的,但这是可行的)。并在模糊处理程序中: $('<label />', {
id: 'comment' + id,
text: commentString
}).on('change', function () {
data1.commentString = $(this).text();
}).appendTo(div);
...
input.blur(function () {
var text = $('#attribute').val();
element.children('label').text(text);
element.children('.hidden').removeClass('hidden');
$('#attribute').remove();
element.children('label').change();
});
更新的小提琴:http://jsfiddle.net/62QY8/139/