2016-11-28 18 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

相關問題