为了不在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();
});

演示： 小提琴

Answer 2

当你使用document.body.innerHTML = originalContents; 它创建了没有附加任何事件功能的新元素。

最好使用CSS来隐藏不想要打印的元素，而不是更改任何HTML元素。 CSS提供的规则仅在打印页面时生效。

像这样的东西应该做的伎俩（你可能需要根据HTML的结构调整这个）

@media print {
  body * { display:none; }
  #printArea { display:block; }
}

读一读这个或这个 。