打印模态内容后关闭模态按钮不起作用答案

【问题标题】：Close modal button is not working after I print the modal content打印模态内容后关闭模态按钮不起作用
【发布时间】：2017-08-24 05:26:52
【问题描述】：

我在模态框上有打印按钮来打印模态框的内容。但是点击打印按钮后数据打印正确但是关闭模态和取消模态都不起作用。

这是我打印数据的函数：

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;

在此之后我无法关闭模式。

【问题讨论】：

重新分配.innerHTML时不再附加事件。

标签： javascript jquery

【解决方案1】：

var printContents = document.getElementById('print_data').innerHTML;  
var originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();
document.body.innerHTML = originalContents;
setTimeout(function() {
                location.reload();
           }, 1000);
}

【讨论】：

它对我来说工作正常，打印或cansel 处理后 1 秒后自动关闭

【解决方案2】：

当您更改页面的 HTML 时，您向按钮注册的事件也消失了。因此，您需要将事件重新附加到按钮。

更好的方法是使用 CSS 隐藏您的内容，不要覆盖它，如下面的评论。

【讨论】：

一种不覆盖所有 DOM 的解决方法，它添加 CSS 以隐藏您不想打印的元素，例如 this answer 状态。我想到的其他可能的解决方案是将所有内容添加到 iframe 中并仅打印 iframe，例如 this answer

【解决方案3】：

您可以使用以下任何一种方法：

1) 使用.on()方法如下：

$('.closeButton').on('click',function(){
    // do your stuff
    // You need to call close model function as per the model js you have used
  });

2) 使用.delegate()方法如下：

$('body').delegate('.closeButton','click',function(){
    // do your stuff
  });

3) 替换HTML后可以绑定点击事件如下：

$('.closeButton').bind('click');

【讨论】：

【解决方案4】：

根据 DucFilan 和 Frankusky 的建议，

获得需要打印的数据后，将该数据附加到某个 div 并隐藏其他元素（除了您附加数据的 div 之外）。打印数据后，显示隐藏元素并隐藏数据 div，如下所示，

  var printContents = document.getElementById('print_data').innerHTML;
  document.getElementById('printContents').innerHTML = printContents;
  var allElements = document.body.children;
  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "none";
    }
  }

  window.print();

  for(var i = 0; i < allElements.length; i++) {
    if(allElements[i].getAttribute('id') !== "printContents") {
        allElements[i].style.display = "block";
    } else {
        allElements[i].style.display = "none";
    }
  }

工作示例 - https://jsfiddle.net/totpvcrh/1/

注意：在小提琴中，关闭打印对话框后，您将在打开模式按钮下方收到消息。无需为此烦恼。在网站上它工作正常。

【讨论】：