Problems with update input Objects in JQuery

Question

When I double click the card the dialog pops up, and it is then possible to create dynamic checkBoxes, and comments. So far so good. When creating the checkBoxes or comments it is possible to edit or delete it.

The issue is when creating one comment and name it eg. "Hallo". Then I want to edit it, and name it "Hallo World", then save the data via Button "Get value". When I open the same card the comment is still named "Hallo", and not "Hallo World". I need to update the input objects' commentString property. I tried to implement this on label element:

$('<label />', {
        id: 'comment' + id,
        text: commentString
    }).on('change', function () {            
        data1.commentString = $(this).val();
    }).appendTo(div);

and this line on edit function:

element.children('input').change();

But it seems not to work.

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

The issue is that the data1 object is attached to the label element, that holds the comment, but when the comment is edited the value of the new comment is sent to element.children('input'), which was the input to edit the comment. What you want is send the value to the label:

    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();
    });

To be more accurate, in fact you should not use .val() on a label, this method is meant to be used on form elements. So a better solution would be to use the .text() value in the "change" handler (here again, this seems un-natural to put a change handler on a label, but that works). and in the blur handler:

    $('<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();
    });

Updated fiddle: http://jsfiddle.net/62QY8/139/