2016-11-28 17 views
0

我已经写了一些JS代码到网页的html.on一个锚标记的点击打印图像时首先加载文档和我点击它打印图像功能 但是当我取消从浏览器打印打印预览打印它带我到我的网页,现在第二次,如果我在打印锚标记点击,它不工作和事件侦听器未显示,JS脚本我写的正常工作第一次。 以下是我的代码打印图像。事件处理程序缺少一次函数被调用JS脚本

(function ($) { 
 
    "use strict"; 
 

 
    function printDiv(imglink){ 
 
    var originalContents=document.body.innerHTML; 
 
    var printContents = '<img class="alignnone size-full wp-image-3824" src="'+imglink+'" />'; 
 
    // var originalContents = document.body.innerHTML; 
 
    document.body.innerHTML = printContents; 
 
    document.bgColor = '#ffffff'; 
 

 
    window.print(); 
 
    document.body.innerHTML = originalContents; 
 
    
 
    } 
 
    
 
    $(document).ready(function(){ 
 
    var plink=$('div.printit').children()[0]; 
 
    plink.removeAttribute('href'); 
 
    var hostname=window.location.hostname; 
 
    var port=window.location.port; 
 
    // var imglink=$('div.field--name-field-healthpass-image').children()[0].src; 
 
    var imglink='http://'+hostname+':'+port+'/themes/child/images/massage-voucher.jpg'; 
 
    $(plink).on("click",printDiv(imglink)); 
 
    }); 
 
    
 
})(jQuery);

+0

$(砰砰)。在( “点击”,printDiv .bind(null,imglink)) –

+1

'document.body.innerHTML = originalContents;' - 移除事件侦听器 –

+0

我认为您可以使用css @media查询打印,只需使用@ meida css {display:none}隐藏所有内容除了小说nt你想打印并激发js事件:window.print();演示在这里:http://codepen.io/ashraftalib/pen/Jbygpw/ – Ashraf

回答

0

您可以使用匿名回调函数,也可以使用event.data对象来传递数据:

(function($) { 
    "use strict"; 

    function printDiv(event) { 
    var originalContents = document.body.innerHTML; 
    var printContents = '<img class="alignnone size-full wp-image-3824" src="' + 
         event.data.imglink + '" />'; 
    // var originalContents = document.body.innerHTML; 
    document.body.innerHTML = printContents; 
    document.bgColor = '#ffffff'; 

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

    } 

    $(document).ready(function() { 
    var plink = $('div.printit').children()[0]; 
    plink.removeAttribute('href'); 
    var hostname = window.location.hostname; 
    var port = window.location.port; 
    // var imglink=$('div.field--name-field-healthpass-image').children()[0].src; 
    var imglink = 'http://' + hostname + ':' + port + '/themes/child/images/massage-voucher.jpg'; 
    $(plink).on("click", {imglink:imglink}, printDiv); // <---here 
    }); 

})(jQuery); 
+0

问题是,当我存储orignal内容文档正文,它失去了事件监听器,第一次节点打印我的书面函数我成功地通过了图像winodw打印,但第二次我的脚本不起作用,因为我把光盘中的orignal内容 - > document.body.innerHTML = orignalcontents; 这里发生了一些事情,并且事件没有绑定到再次控制 –

+0

这就是当您替换所有内容时发生的情况,它会删除事件侦听器,因此您必须重新绑定它。 – Jai

相关问题