為了不在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; }
}

讀一讀這個或這個 。