打印模態內容後關閉模態按鈕不起作用

我有模態打印按鈕打印模態內容。但點擊打印按鈕後數據打印正確，但關閉模式並取消模式不起作用。打印模態內容後關閉模態按鈕不起作用

這是我對打印數據功能：

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

打印模態內容後關閉模態按鈕不起作用

回答

相關問題