Question

我有div，其内容是在使用ajax

加载页面后动态添加的

这是我的内容

＆＃13;

    function getHref(event,elem){
    	event=event || window.event;
    	$.Event(event).preventDefault();    	
    	$('body').on('click','a.view-pdf', function(){    
    		var href=$(this).attr('href');
    		//alert(href);
    		openNav(href); 
    	});                                           	    	
    	document.getElementById("myNav").style.width = "100%";    	  	        		      	
    }
    function openNav(href) {   
    	$("#myNav").pdf( {
    		source: href,
    	} );
    	cross ='<a href="javascript:void(0)" class="closebtn" onclick=closeNav()>&times;</a>';
       	$(".overlay").append(cross);
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <div class="image-div-conents">
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date">
    <span class="bill-name">Tt</span>
    <span class="bill-date">26 Feb, 2017 8:42 PM</span>
  </div>
 </div>
<a style="text-decoration:none" onclick="getHref(event,this);" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">
  <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.onerror=null;this.src=" text.png"="" ;"="">
  <div class="validitity">
    <span>Validitity:01 Mar, 2018 11:57 AM</span>
  </div>
</a>

＆＃13;

当用户点击图像时，将打开覆盖屏幕，并且在调试时将打开pdf文件，我发现我得到了不同的值，但在覆盖屏幕上打开了相同的pdf文件。

Answer 1

tl; dr 不要重复使用相同的DOM节点，动态创建一个。

出于某种原因，touchpdf（图书馆）不允许重复使用相同的标记（最佳猜测）。

<强> HTML

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <div class="image-div-conents">
    <h3 class="circle">MB</h3><div style="float:left" class="doc-name-date">
    <span class="bill-name">Tt</span>
    <span class="bill-date">26 Feb, 2017 8:42 PM</span>
  </div>
</div>
<a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">
  <img class="img-responsive" src="http://link.com-A43713_20170226203509_6.jpg" alt="No Image" onerror="this.src=text.png">
  <div class="validitity">
    <span>Validitity:01 Mar, 2018 11:57 AM</span>
  </div>
</a>

<!-- Add this to the main page, where you want to show the PDF -->
<div id="overlay"></div>

<强>的JavaScript

function attachCloseBtn(){
  $("#overlay").prepend('<a href="javascript:void(0)" style="float: right;" class="closebtn" onclick=closeNav()>&times;</a>');
}

function cleanUp(){
  $("#overlay").empty();
}

function getFileName(pdfURI){
  if (typeof pdfURI === "string")
    return pdfURI.split("/").reverse()[0].split(".")[0]
  else 
    throw new TypeError("provide a URI!");
}

window.closeNav function(){
  $("#overlay").empty().hide();
}

$('body').on('click','a.view-pdf', function(e){
  e.preventDefault();
  openNav(e.currentTarget.href); 
});     

function openNav(pdfURI) {
  // cleaning up first
  cleanUp();

  // preparing dom environment
  var fileName = getFileName(pdfURI);
  attachCloseBtn();
  $("#overlay").append('<div id="'+fileName+'"></div>'); // <-- placeholder for PDF file

  // opening pdf
  $("#"+fileName).pdf({ // <-- do not forget # for the id!
    source: pdfURI
  });
  $("#overlay").show();
}

旧答案

我猜你从event=event || window.event;

获得副作用

为什么不直接使用jQuery事件？我编辑了您的HTML标记，并删除了onclick和onerror事件侦听器。见this fiddle

<强> HTML：

 <a style="text-decoration:none" class="view-pdf" href="http://link.com-A43713_20170226203413_1.pdf">

<强> JavaScript的：

$('body').on('click','a.view-pdf', function(e){    
  e.preventDefault();
  var href = e.currentTarget.href;
  openNav(href); 
});                                                           
function openNav(href) {
  // added for debug
  $("#output").append(href);
}

touchpdf：使用不同的URL打开相同的文件

1 个答案: