Question

当我双击卡片时，弹出对话框，然后可以创建评论。到现在为止还挺好。创建评论时，可以对其进行编辑。

问题是当我编辑文本输入字段时，我编辑的文本位于错误的位置。并涵盖“编辑/删除”段落。我希望在按下文本位置的编辑时放置输入字段。

JQuery：“点击”处理程序

$('#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('label').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).text();
        }).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);

    }

Answer 1

只需修改以下行

即可

element.children('label,p').addClass('hidden').end().append(input);

到

element.children('label,p').addClass('hidden').end().prepend(input);

JSFiddle Demo

Answer 2

不应将输入字段作为最后一个元素附加，而应将其插入标签所在的位置。

$('#divComments').on('click', '.edit', function () {
    var element = $(this).parent()
    var label = $(this).parents(".CommentStyle").find("label");
    var text = label.text()
    var input = $('<input id="attribute" value="' + text + '" />')
    element.children('label,p').addClass('hidden')
    label.after(input)
    input.select();

    input.blur(function () {
        var text = $('#attribute').val();
        element.children('label').text(text);
        element.children('.hidden').removeClass('hidden');
        $('#attribute').remove();
        element.children('label').change();
    });
});

要隐藏时间戳，只需将.labelStyle添加到要隐藏的元素列表中：

element.children('label,p,.labelStyle').addClass('hidden')

将输入字段放在JQuery中的正确位置的问题

2 个答案: