javascript - 在按钮单击时将输入转换回 div

Question

我正在使用以下代码

 $(document).on('click', '#editDetailBtn', function () {

    var input = $('<input id="#detailprimaryDescription" type="text" />');
    input.val($('#detailprimaryDescription').text());
    $('#detailprimaryDescription').replaceWith(input);


    $('#editDetailBtn').hide();
    $('#detailPrimaryCancel').show();
    $('#detailPrimarySave').show();

});


$(document).on('click', '#detailPrimaryCancel', function () {


    var input = $('<div id="#detailprimaryDescription" ></div>');
    //input.val($('#detailprimaryDescription').text());
    $('#detailprimaryDescription').replaceWith(input);


        $('#editDetailBtn').show();
        $('#detailPrimaryCancel').hide();
        $('#detailPrimarySave').hide();

});

我想要实现的是，一旦单击取消，它就会将输入字段转回 div

http://jsfiddle.net/7XWAu/

Answer 1

我想这就是你的目标。

JS小提琴

您不需要在 dom 中的 id 开头放置“#”，它仅用于引用元素。

所以基本上，每个地方都有类似的东西：

var input = $('<input id="#detailprimaryDescription_input" type="text" />');

你应该做类似的事情：

var input = $('<input id="detailprimaryDescription_input" type="text" />');

一旦我清理了它，它就像在小提琴中一样工作。

我确实想说，仅显示和隐藏包含所有这些输入的 div 而不是操纵 DOM 以不断创建/销毁它们将是一种更好的做法。