为什么jquery加载页面在我的页面中不起作用

Question

为什么我替换div id=book0时我的fancybox无效...并在我的页面中添加jquery.load这样的内容：

<div id="book0" class="withoutborder0"></div>
<div id="book1" class="withoutborder1"></div>
<div id="book2" class="withoutborder2"></div>
<div id="book3" class="withoutborder3"></div>
<div id="book4" class="withoutborder4"></div>


$('#book0').load('import.html #book0img');
$('#book1').load('import.html #book1img');
$('#book2').load('import.html #book2img');
$('#book3').load('import.html #book3img');
$('#book4').load('import.html #book4img');

这是我的jquery.load页面
    http://www.booclin.ovh/tom/365/book.html

这是我的网页的链接和代码，没有jquery.load谁工作正常
    http://www.booclin.ovh/tom/365/bookb.html

代码

$("img").error(function() { $(this).parent().remove(); });
$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();
console.clear();


$('#logohomepage').click(function() { 
$('body').css({ 'overflow': 'auto' }); 
});    

function showDiv() { 
document.getElementById('logohomepage').style.display = "none"; 
document.getElementById('allgalleries').style.display = "block"; 
}    




$("#launcherbook0, #launcherbook0b, #launcherbook0c").on("click", function(){
$("a.fancyboxgallerybook0").eq(0).trigger("click");
}); 

$("#launcherbook1, #launcherbook1b").on("click", function(){
$("a.fancyboxgallerybook1").eq(0).trigger("click");
}); 

$("#launcherbook2, #launcherbook2b").on("click", function(){
$("a.fancyboxgallerybook2").eq(0).trigger("click");
}); 

$("#launcherbook3, #launcherbook3b").on("click", function(){
$("a.fancyboxgallerybook3").eq(0).trigger("click");
});

$("#launcherbook4, #launcherbook4b").on("click", function(){
$("a.fancyboxgallerybook4").eq(0).trigger("click");
}); 

$("#launcherinfo, #launcherinfob").on("click", function(){
$("#infofull").eq(0).trigger("click");
});







$(".fancybox-lock").bind("mousewheel", function() { return false; });









$( function( ){ 
$( "#closegallerybook0, #closegallerybook1, #closegallerybook2, #closegallerybook3, #closegallerybook4, #infofull" ).on( "click", function(){ $.fancybox.close(); return false; }); 
});






$(".fancyboxthumbnailsgallerybook0, .hidemenubook0").click(function(){
$(".secondleftpartbook0").show();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});

$("#closegallerybook0").click(function(){
$(".secondleftpartbook0").hide();
$("#book0").show();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});






$(".fancyboxthumbnailsgallerybook1, .hidemenubook1").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").show();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});

$("#closegallerybook1").click(function(){
$(".secondleftpartbook1").hide();
$("#book0").hide();
$("#book1").show();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});





$(".fancyboxthumbnailsgallerybook2, .hidemenubook2").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").show();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});

$("#closegallerybook2").click(function(){
$(".secondleftpartbook2").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").show();
$("#book3").hide();
$("#book4").hide();
$("#infofull").hide();
});






$(".fancyboxthumbnailsgallerybook3, .hidemenubook3").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").show();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").show();
});

$("#closegallerybook3").click(function(){
$(".secondleftpartbook3").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").show();
$("#book4").hide();
$("#infofull").hide();
});






$(".fancyboxthumbnailsgallerybook4, .hidemenubook4").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").show();
$(".partmenuhideninfo").show();
});

$("#closegallerybook4").click(function(){
$(".secondleftpartbook4").hide();
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").show();
$("#infofull").hide();
});






$(".hidemenuinfo").click(function(){
$(".secondleftpartbook0").hide();
$(".secondleftpartbook1").hide();
$(".secondleftpartbook2").hide();
$(".secondleftpartbook3").hide();
$(".secondleftpartbook4").hide();
$(".partmenuhideninfo").hide();
$("#infofull").show();
});


$("#infofull").click(function(){
$("#book0").hide();
$("#book1").hide();
$("#book2").hide();
$("#book3").hide();
$("#book4").hide(); 
});    







function toggleOverlay () { 
var overlay = document.querySelector("div"); 
overlay.classList.toggle('hide-overlaymenu');
document.body.style.overflow = "hidden";
}

$('#menumodalclose').click(function() {
$('body').css({
'overflow': 'scroll'
});
});







$(function() {
var salt = Math.floor(Math.random() * 1000),
time;

function load_script() {
$('#backgroundhomepage').remove();
$.getScript("index/js/backgroundhome.js?s=" + salt, function() {
$('script:last').attr('id', 'myscript');
salt = Math.floor(Math.random() * 1000);
time = setTimeout(function() {
load_script();
}, 5 * 1000);
});
}
load_script();
});


<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/js/modernizr.custom.js"></script>

<script type="text/javascript"         src="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.js"></script>

<script type="text/javascript" src="http://www.booclin.ovh/tom/365/index/book/fancybox.js"></script>

<script id="backgroundhomepage" src="http://www.booclin.ovh/tom/365/index/js/backgroundhome.js"></script>  


<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/css/style.css">

<link property="stylesheet" rel="stylesheet" type="text/css" href="http://www.booclin.ovh/tom/365/index/book/jquery.fancybox.css" type="text/css">


<div class="hide-overlaymenu">

<div class="overlaymenu">
<div class="overlaymenu-content">

<div class="buttonmenuinside-container">
<a id="menumodalclose" class="buttonmenuinside" onclick="toggleOverlay()">
<i class="fa fa-toggle-off"></i>
<i class="fa fa-toggle-on"></i>
<img style="height:20px; width:20px; opacity:0.5;" src="http://www.starkasia.com/wp-content/uploads/icons/menuclose.png" alt="">
</a>
</div>


<div class="menucontent">
<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0" data-fancybox-group="book0" href="javascript:void(0);">
BOOK0</a>

<br/><br/><br/>
<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>

<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2" data-fancybox-group="book1" href="javascript:void(0);">BOOK 2</a><br/>

<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3" data-fancybox-group="book1" href="javascript:void(0);">BOOK 3</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4" data-fancybox-group="book1" href="javascript:void(0);">ARCHIVE</a><br/>


<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfo" href="javascript:void(0);">INFO</a>

</div>
</div>
</div>
</div>
















<div id="logohomepage" style="display:inline;" onclick="showDiv()">   

<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0b" data-fancybox-group="book0" href="javascript:void(0);">


<span style="width: 100%; max-width:120px; position: absolute; top: 100px; left:-100%; right:-100%; margin:auto;">
CLICK ME</span>   

</a> 
</div>  












<div id="allgalleries" style="display:none;"> 

<div class="leftpart">
<div class="firstleftpart"> 


<a style="opacity: initial!important;" class="hidemenubook0" id="launcherbook0c" data-fancybox-group="book0" href="javascript:void(0);">BOOK 0</a>

<br/><br/><br/>

<a style="opacity: initial!important;" class="hidemenubook1" id="launcherbook1b" data-fancybox-group="book1" href="javascript:void(0);">BOOK 1</a><br/>

<a style="opacity: initial!important;" class="hidemenubook2" id="launcherbook2b" data-fancybox-group="book2" href="javascript:void(0);">BOOK 2</a><br/>

<a style="opacity: initial!important;" class="hidemenubook3" id="launcherbook3b" data-fancybox-group="book3" href="javascript:void(0);">BOOK 3</a><br/> 

<a style="opacity: initial!important;" class="hidemenubook4" id="launcherbook4b" data-fancybox-group="book4" href="javascript:void(0);">ARCHIVE</a><br/>


<a style="opacity: initial!important;" class="hidemenuinfo" id="launcherinfob" href="javascript:void(0);">INFO</a>

<br/><br/><br/>   



</div>        








<div style="display:none;" class="secondleftpartbook0">    

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>

<a style="font-size: 8px;" href="javascript:;"> | </a>   

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>


<br/> 

<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook0" class="opengallerybook0" href="javascript:;">
THUMBNAILS</a>
</div>   




<div style="display:none;" class="secondleftpartbook1">    

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>

<a style="font-size: 8px;" href="javascript:;"> | </a>   

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>


<br/> 

<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook1" class="opengallerybook1" href="javascript:;">
THUMBNAILS</a>
</div>


<div style="display:none;" class="secondleftpartbook2">    

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>

<a style="font-size: 8px;" href="javascript:;"> | </a>   

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook2" class="opengallerybook2" href="javascript:;">
THUMBNAILS</a>
</div> 



<div style="display:none;" class="secondleftpartbook3">    

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>

<a style="font-size: 8px;" href="javascript:;"> | </a>   

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook3" class="opengallerybook3" href="javascript:;">
THUMBNAILS</a>
</div> 



<div style="display:none;" class="secondleftpartbook4">    

<a title="Prev" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-next" href="javascript:$.fancybox.prev();">PREV</a>

<a style="font-size: 8px;" href="javascript:;"> | </a>   

<a title="Next" style="font-size: 8px; vertical-align: bottom; height: auto; width:15px; position: relative" class="fancybox-nav fancybox-prev" href="javascript:$.fancybox.next();">NEXT</a>


<br/> 


<a style="font-size: 8px;" title="Thumbnails" id="closegallerybook4" class="opengallerybook4" href="javascript:;">
THUMBNAILS</a>
</div>



<a class="iconfirstleftpart" style="cursor:pointer" onclick="toggleOverlay()">
<img style="height:20px; width:20px;" src="http://www.starkasia.com/wp-content/uploads/icons/menu.png" alt=""></a> 

</div>  


<div class="rightpart">
<div id="globalgalerie">


<div id="book0" class="withoutborder0">

<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://1.bp.blogspot.com/-N2KeLaszKAM/T26Tghy9lsI/AAAAAAAAAVI/ghFRPBmP0o8/s1600/200px-George_Spanky_McFarland.jpg" alt=""/>
</a>

<a class="fancyboxgallerybook0" data-fancybox-group="book0" href="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" title="">
<img class="fancyboxthumbnailsgallerybook0" style="max-width:200px" src="http://creationwiki.org/pool/images/thumb/d/df/Ctenophore_larva.jpg/200px-Ctenophore_larva.jpg" alt=""/>
</a>

</div>


<div id="book1" class="withoutborder1">

<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://animebathscenewiki.com/images/thumb/1/13/School_Rumble_12.png/200px-School_Rumble_12.png" alt=""/>
</a>

<a class="fancyboxgallerybook1" data-fancybox-group="book1" href="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" title="">
<img class="fancyboxthumbnailsgallerybook1" style="max-width:200px" src="http://www.zeldadungeon.net/wiki/images/thumb/1/10/Windfish.jpg/200px-Windfish.jpg" alt=""/>
</a>

</div>


<div id="book2" class="withoutborder2">

<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Plasmafractal.gif/200px-Plasmafractal.gif" alt=""/>
</a>

<a class="fancyboxgallerybook2" data-fancybox-group="book2" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" title="">
<img class="fancyboxthumbnailsgallerybook2" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Stazione_zoologica_Dohrn.jpg/200px-Stazione_zoologica_Dohrn.jpg" alt=""/>
</a>  

</div>


<div id="book3" class="withoutborder3">

<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7b/Rufisque-1912.jpg/200px-Rufisque-1912.jpg" alt=""/>
</a>


<a class="fancyboxgallerybook3" data-fancybox-group="book3" href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" title="">
<img class="fancyboxthumbnailsgallerybook3" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/HMS_Intrepid.jpg/200px-HMS_Intrepid.jpg" alt=""/>
</a>

</div>


<div id="book4" class="withoutborder4">

<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/RMS_Olympic_radio_1913.jpg/200px-RMS_Olympic_radio_1913.jpg" alt=""/>
</a>


<a class="fancyboxgallerybook4" data-fancybox-group="book4" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" title="">
<img class="fancyboxthumbnailsgallerybook4" style="max-width:200px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG/200px-Agiospavlos_DM_2004_IMG003_Felsenformation_nahe.JPG" alt=""/>
</a>   

</div>



<div id="infofull">
<span class="spanbold">INFO</span><br/><br/>
 BLABLABLA
</div>   

</div>
</div>
</div>  

Answer 1

.load()方法是同步的...
这意味着它有延迟得到回应。

在接收到响应之前，脚本需要很长时间才能执行此延迟。

此外，您在调用负载之前启动FancyBox实例 所以你提供的元素（ancors）显然是缺失的。

所以解决方法是修改这一行：

$("a.fancyboxgallerybook0, a.fancyboxgallerybook1, a.fancyboxgallerybook2, a.fancyboxgallerybook3, a.fancyboxgallerybook4").fancybox();

作为一个功能：

function fancyInit(x){
    $("#book"+x).find("a.fancyboxgallerybook"+x).fancybox();
}

然后使用.load()回调：

$('#book0').load('import.html #book0img',fancyInit(0));
$('#book1').load('import.html #book1img',fancyInit(1));
$('#book2').load('import.html #book2img',fancyInit(2));
$('#book3').load('import.html #book3img',fancyInit(3));
$('#book4').load('import.html #book4img',fancyInit(4));

当.load()成功完成时，回调将被执行。