Question

我通过javascript修改了一个html，我希望当我点击esc时，它会回到html的原始形式：

if ($("#div").show()) {
    $("#div1").empty();
    $("#div1").html("<input class='tabledit-input form-control' type='text' value='" + file[0].name + "'>");

    $("#div2").empty();
    $("#div2").html("<input type='text' class='form-control' placeholder='div2'>");

    $("#div3").empty();
    $("#div3").html("<input type='text' class='form-control' placeholder='div3'>");
} else if (e.keyCode == 27) {
    //what to do here?
}

Answer 1

您可以使用.clone()方法在事件发生之前克隆原始文件：

//#################  clone them here ######################

var d1 = $("#div1").clone(),
    d2 = $("#div2").clone(),
    d3 = $("#div3").clone();

现在，您可以将其替换为：

if ($("#div").show()) {
    $("#div1").empty();
    $("#div1").html("<input class='tabledit-input form-control' type='text' value='" + file[0].name + "'>");

    $("#div2").empty();
    $("#div2").html("<input type='text' class='form-control' placeholder='div2'>");

    $("#div3").empty();
    $("#div3").html("<input type='text' class='form-control' placeholder='div3'>");
} else if (e.keyCode == 27) {
    //################# now replace it here. ####################
    $('#div1').replaceWith(d1);
    $('#div2').replaceWith(d2);
    $('#div3').replaceWith(d3);
}

按Esc键后恢复原始html

1 个答案: