javascript - 保留 dom 节点问题的未修改副本

Question

我正在尝试制作 dom 节点的副本，以便稍后可以在修改后恢复其状态。在这种情况下，模式窗口关闭后。

奇怪的是，在两次打开模式后，单击#show_reg_form按钮并关闭模式。 modal_body_initial 变量似乎正在被修改，因为下次我打开模态窗口时它处于修改状态。

我还尝试过在隐藏函数中使用或不使用此行。

modal_body = modal_auth.find('.modal-body');

想一想我这里出了什么问题吗？

$(document)
.on('ready', function(){
    var modal_auth = $('#modal_auth');
    var modal_body = modal_auth.find('.modal-body');
    var modal_body_initial = modal_body.clone();

    $('#modal_auth').on('hidden.bs.modal', function (e) {
        modal_body.replaceWith(modal_body_initial);
        modal_body = modal_auth.find('.modal-body');
    });
})
.on('click', '#show_reg_form, #show_login_form', function(){
    var button = $(this);
    var form = button.next();
    var parent = button.parent();

    form.hide();
    form.removeClass('hidden');

    parent.siblings(':not(.custom-header)').each(function(){
        $(this).hide();
    });

    form.slideDown(function(){
        button.slideUp();
    });
})

Answer 1

如果您想要保留 modal_body_initial 的 HTML， 也许像下面这样的东西适合你:

$(document).on('ready', function(){
    var modal_auth = $('#modal_auth');
    var modal_body = modal_auth.find('.modal-body');
    var modal_body_initial = modal_body.html(); // <------- EDIT

    $('#modal_auth').on('hidden.bs.modal', function (e) {
        modal_body.html(modal_body_initial); // <------- EDIT
        modal_body = modal_auth.find('.modal-body');
    });
});