javascript - 如何始终允许打印功能始终可点击？

Question

我有一个打印按钮，用于打印我的内容的某些区域。我可以点击打印我想要打印的内容，但是当我点击取消按钮返回到我的网页内容后，它不允许我再次点击打印按钮。

HTML:

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

Javascript

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

我想要做的是多次点击打印按钮和取消按钮。

感谢您的帮助。

Answer 1

您正在从文档中删除打印按钮，然后将其重新添加到文档中，但此时不再为该按钮注册单击事件处理程序。这不仅是打印按钮的问题，也是页面上已注册事件处理程序的所有元素的问题。

您可以在重新添加元素后重新注册事件处理程序，但最好不要首先删除这些元素。

正如 @NathanTuggy 的评论中所建议的，您可以使用 CSS 来防止在打印页面时包含某些元素。您可以使用 CSS media query 来做到这一点.

如果您只想从打印页面中排除打印按钮，您可以添加:

<style>
@media print {
    #printer {
        display: none;
    }
}
</style>