Question

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

这是我打印数据的功能：

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

document.body.innerHTML = printContents;

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

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

Answer 1

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

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

Answer 2

var data = {
      "App 1": "5a67-b-45-86e7-bfb351",
      "App 2": "293-e2-4a-96c-4471d0ea",
      "App 3": "f87d5-e0-41-bd-16dc72e"
  }
  
 var output = [];
 var keys = Object.keys(data);
 
 keys.forEach(function(key){
  var value = data[key];
  output.push({id:value,name:key});
 });
 
 console.log(output);

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后绑定click事件，如下所示：

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

Answer 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/

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

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

4 个答案: