CODEWITHSUNDEEP
javascriptjqueryhtml
Tum Lina
Tum Lina

Reputation: 477

How to always allow print function clickable all the time?

I have a print button for printing some area of my content. I can click to print the content I want to print fine, but after I click cancel button to return back to my web content, it not allow me to click on print button again.

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();
    });
});

What I wish to do is to click print button and cancel button as many time as I wish.

Thanks for any helps.

Upvotes: 1

Views: 304

Answers (1)

John S
John S

Reputation: 21492

You are removing the print button from the document and then re-adding it to the document, but at that point the click-event handler is no longer registered for the button. This won't just be a problem for the print button but for all elements on the page that have registered event handlers.

You could re-register the event handlers after you add the elements back, but it is probably better to not remove the elements in the first place.

As suggested in a comment by @NathanTuggy, you could use CSS to prevent certain elements from getting included when the page is printed. You can do that with a CSS media query.

If you just want to exclude the print button from the printed page, you would add:

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

Upvotes: 1

Related Questions