javascript - 为了不杀死 javascript 中的事件处理程序，有什么方法？

Question

我有一个打印功能，可以打印我的 HTML 内容。我可以很好地点击打印按钮，但是在我点击打印布局上的取消按钮后，我所有的 javascript 都被杀死了。我无法再对其他按钮进行任何操作。

HTML:

<div id="printArea">
<p>Hello World</p>
</div>
<button type="button" id="printer">Print</button>

Javascript

$(document).on('click', '#printer',function(event){
        event.preventDefault();
        var printContents = document.getElementById("printArea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    });

我想点击打印按钮，然后点击取消按钮返回，其他按钮仍然可以像往常一样执行操作。

如有任何帮助，我们将不胜感激。

Answer 1

最好的解决方案是使用 css 来隐藏/显示元素，但出于某种原因，如果这不可能，在您的脚本中不要替换元素，而是显示/隐藏它们

$(document).on('click', '#printer', function (event) {
    event.preventDefault();
    var $print = $("#printArea");
    //hide teh contents of the page
    $(document.body).wrapInner('<div style="display: none"></div>');
    //move a copy of the print area to the body and show it
    var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
    window.print();
    //remove the temporary print display
    $div.remove();
    //show back the original content
    $(document.body).children().contents().unwrap();
});

演示:Fiddle