Question

我用文本输入替换div，以便用户可以编辑文本。当用户点击进入时，我希望文本输入变回带有编辑文本的div。

我遇到的问题我无法在输入后将文本输入更改回div。我已经尝试了replaceWith()和JQuery函数的许多组合应该这样做，但我无法弄明白。有人可以帮忙吗？

这是包含要编辑的评论文本的div

<div id="comment-message-' + comment.id + '">' + comment_message + '</div>

用户单击链接以编辑注释，注释将变为文本输入。这很好用

<a href="javascript:editComment(' + comment.id + ');">Edit Comment</a>

这是将注释更改为文本输入的功能。这工作

function editComment(id) {
    var t = $('#comment-message-' + id).text();
    $('#comment-message-' + id).replaceWith('<form id="edit-comment-form-' + id + '" name="edit-comment-form-' + id + '" action="javascript:callAPI(' + id + ')"><input id="edit-comment-' + id + '" name="edit-comment-' + id + '" type="text" value="' + t + '"/></form>');
}

使用Facebook API，我拨打电话。如果没有错误，则文本输入将更改为带有新注释的div。这里的API调用有效，但从文本输入到div的更改不是

function callAPI(id) {
    var e = document.getElementById('edit-comment-' + id).value,
        edit = { message: e };

    FB.api('/' + id, 'POST', edit, function (response) {
        if (response && !response.error) {
            var comment = $('#comment-message-' + id),
                form = $('#edit-comment-form-' + id); // forgot to add '#' here 
            comment.removeChild(form);
            comment.html('<div id="comment-message-' + id + '">' + e + '</div>');
        }
    });
}

Answer 1

使用下面的代码将输入类型替换为div

FB.api('/' + id, 'POST', edit, function (response) {
    if (response && !response.error) {
        $('#edit-comment-form-' + id).replaceWith('<div id="comment-message-' + id + '">' + e + '</div>')
    }
});

你通过输入表单替换$（'＃comment-message-'+ id）所以你需要将$（'＃edit-comment-form-'+ id）替换为$（'＃comment-message - '+ id）

用输入替换div后，用div替换输入

1 个答案: