我有div,其内容是在使用ajax
加载页面后动态添加的这是我的内容
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()>×</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文件。
答案 0 :(得分: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()>×</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);
}