一旦在js脚​​本中调用函数，就会丢失事件处理程序

Question

我已经编写了一些js代码，用于在页面的html中点击锚标签打印图像。首先加载文档时我点击它打印图像的功能 但是当我从浏览器打印打印预览中取消打印时，它会将我带到我的网页，现在第二次，如果我点击打印锚标签，它不起作用，事件监听器没有显示我写的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);

Answer 1

您可以使用匿名回调函数，也可以使用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);