[英]Script Outside of $(document).ready
我已經為客戶端構建了一個站點,當用戶單擊導航鏈接時,鏈接頁面的內容將動態加載並使用JQuery過渡,而不是加載新頁面。
我遇到的問題是,因為它沒有加載新頁面,所以$(document).ready不會再次觸發,並且各個頁面上的所有JS都損壞了。 例如,如果您訪問http://www.woodlandexotica.com/species.php ,則該頁面可以正常運行,但是如果您嘗試從http://www.woodlandexotica.com/index_dev.php導航至該頁面,則JS將無法正常工作。
我不是JS方面的專家,我非常感謝任何幫助!
問題在於,當您調用“ .load()”時,您正在使用URL字符串和選擇器后綴從加載的內容中提取。 當您以這種方式使用“ .load()”時,jQuery會剝離所有腳本並且不運行它們。 除了自己實現自己的“ .load()”版本以外,您無能為力,或者(最好)使您加載的其他頁面不是完整的HTML頁面。 如果您使用“ .load()”而不在URL字符串上使用選擇器后綴,則jQuery 會運行腳本。
有關更多信息,請參見jQuery錯誤6307 。 該錯誤不會得到修復,但希望文檔會得到改進。
您組織此代碼的方式是錯誤的
僅將裝訂的內容保留在document.ready內部,並將邏輯移到可以通過任何頁面訪問的function ..之外。
$(document).ready(function() {
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// CONTENT BG SLIDESHOW
//////////////////////////////////////////////////
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var slideshowSpeed = 8000;
var interval;
var activeContainer = 1;
var currentImg = 0;
var navigate = function(direction) {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = 1;
var showImage = function(photoObject, currentContainer, activeContainer) {
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
$("#bgimg" + activeContainer).css({
"background-image" : "url(" + photoObject + ")",
"display" : "block",
"z-index" : currentZindex
});
// Fade out the current container
// and display the header text when animation is complete
$("#bgimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
animating = false;
}, 500);
});
$("#bgimg" + currentContainer).css({
"z-index" : "1"
});
currentZindex = 1;
};
function photoLoaded() {
if(!--numPhotosLeft) {
navigate("next");
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
$('#bg_load').fadeOut('fast');
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
}
var photos = ["images/bg01.jpg", "images/bg02.jpg", "images/bg03.jpg"];
var numPhotosLeft = photos.length;
for(var i = 0; i < photos.length; ++i) {
var img = new Image();
img.onload = photoLoaded;
img.src = photos[i];
}
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//////////////////////////////////////////////////
// PAGE TRANSITION
//////////////////////////////////////////////////
// ADJUST FOR DEEPLINKING
var hash = window.location.hash.substr(1);
var href = $('a.link').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-4)){
var toLoad = hash+'.php #page_bg';
$('#page_bg').load(toLoad)
}
});
$('a.link').click(function() {
var toLoad = $(this).attr('href')+' #page_bg';
$('#page_bg').animate({opacity: 0.25, marginLeft: '-=875'}, 500, loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4); //MODIFY FOR DEEP LINKING
function loadContent() {
$('#page_wrap').prepend('<span id="load">LOADING...</span>');
$('#load').fadeIn('fast');
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('backgroundImage', 'none');
$('#page_bg').load(toLoad,'',hideLoader);
}
function hideLoader() {
$('#load').fadeOut('fast', showNewContent);
}
function showNewContent() {
$('#page_bg').animate({opacity: 1, marginLeft: '-=860'}, 500);
}
return false;
});
//set initial position and opacity
$('#page_bg').css('marginLeft', 860);
$('#page_bg').css('opacity', 0.25);
$('#page_wrap').prepend('<span id="bg_load">LOADING...</span>');
$('#bg_load').fadeIn('fast');
//////////////////////////////////////////////////
//////////////////////////////////////////////////
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.