Question

当我双击该卡时，弹出对话框，然后可以创建动态复选框和注释。到现在为止还挺好。创建复选框或注释时，可以编辑或删除它。

问题在于创建一条评论并将其命名为例如。 “喂”。然后我想编辑它，并将其命名为“Hallo World”，然后通过Button“Get value”保存数据。当我打开同一张卡时，评论仍然被命名为“Hallo”，而不是“Hallo World”。我需要更新输入对象的commentString属性。我试图在label元素上实现它：

$('<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

Answer 1

问题是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/

JQuery中更新输入对象的问题

1 个答案: