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

我有模态打印按钮打印模态内容。但点击打印按钮后数据打印正确，但关闭模式并取消模式不起作用。打印模态内容后关闭模态按钮不起作用

这是我对打印数据功能：

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

document.body.innerHTML = printContents; 

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

这之后我无法关闭的模式。

来源

2017-08-24 Akhtar Nawaz

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

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

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

来源

2017-08-24 05:30:57

解决方法：不要覆盖您的所有DOM以添加CSS来隐藏您不想打印的元素，如[此答案]（https://stackoverflow.com/a/2618980/4637140）指出。我想到的其他可能的解决方案是将所有内容添加到iframe并仅打印iframe，如[此答案]（https://stackoverflow.com/a/9616706/4637140） – Frankusky

您可以使用以下方法中的任何一个做到这一点：

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');

来源

2017-08-24 06:59:26

基于DucFilan的和Frankusky的建议，

得到数据这是需要被打印后，追加该数据在一定的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/

注：在小提琴，关闭打印对话框后，你会得到消息在打开的模式按钮下方。没有必要为此烦恼。在网站上工作正常。

来源

2017-08-24 07:00:49

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

回答

相关问题