I have a modal with two buttons: print and close modal
html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button class="header__print button--print" title="Print" onclick="printDiv('exportContent')"></button>
</div>
JS:
<script type="text/javascript">
function printDiv(divID) {
var divElements = document.getElementById(divID).innerHTML;
var oldPage = document.body.innerHTML;
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
window.print();
document.body.innerHTML = oldPage;
}
</script>
The issue appears when I press on print btn and close print screen, then back (close) button stop working.
Any idea why is it happening? thanks!
By replacing the entire content of the body, you remove the registered eventListeners. I guess you had an eventListener for the click on "close" button, so the click is no longer listened, and it would be quite difficult to "reconnect" all the events.
To display specific content for print, I advise you not to touch the DOM, and to manage it only with a specific style sheet :
@media print {
section {
display: none;
}
}