Javascript 脚本在$（文档）之外。准备好了吗

我已经为客户端构建了一个站点，当用户单击导航链接时，链接页面的内容将通过JQuery动态加载和转换，而不是加载新页面

我遇到的问题是，因为它没有加载一个新的页面，$（document）.ready不会再次启动，各个页面上的任何JS都会被破坏。例如，如果您访问的页面工作正常，但如果您尝试从导航到该页面，JS将无法工作

---

我不是JS方面的专家，我真的非常感谢所有的帮助

您组织此代码的方式是错误的

只保留document.ready内部的绑定，并将逻辑移到functions.外部，该函数可由任何页面访问

$(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');

    //////////////////////////////////////////////////
    //////////////////////////////////////////////////

});

$（文档）.ready（函数（）{
//////////////////////////////////////////////////
//////////////////////////////////////////////////
//内容背景幻灯片
//////////////////////////////////////////////////
var photos=[“images/bg01.jpg”、“images/bg02.jpg”、“images/bg03.jpg”]；
var slideshowSpeed=8000；
var区间；
var-activeContainer=1；
var currentImg=0；
变量导航=功能（方向）{
当前img++；
如果（当前img==photos.length+1）{
电流img=1；
}
//检查我们需要使用哪个容器
var currentContainer=activeContainer；
如果（activeContainer==1）{
activeContainer=2；
}否则{
activeContainer=1；
}
showImage（照片[currentImg-1]、currentContainer、activeContainer）；
};
var currentZindex=1；
var showImage=函数（photoObject、currentContainer、activeContainer）{
//确保新容器始终位于后台
电流指数--；
//设置新活动容器的背景图像
$（“#bgimg”+activeContainer）.css({
“背景图像”：“url（“+photoObject+”），
“显示”：“块”，
“z索引”：currentZindex
});
//淡出当前容器
//并在动画完成时显示标题文本
$（“#bgimg”+currentContainer）.fadeOut（函数（）{
setTimeout（函数（）{
动画=假；
}, 500);
});
$（“#bgimg”+currentContainer）.css({
“z索引”：“1”
});
currentZindex=1；
};
函数photoLoaded（）{
if（！--numPhotosLeft）{
导航（“下一步”）；
间隔=设置间隔（函数（）{
导航（“下一步”）；
}，幻灯片速度）；
$（'bg#u load'）.fadeOut（'fast'）；
$（'page_bg'）。设置动画（{opacity:1，marginLeft:'-=860'}，500）；
}
}
var photos=[“images/bg01.jpg”、“images/bg02.jpg”、“images/bg03.jpg”]；
var numPhotosLeft=photos.length；
对于（变量i=0；i

问题在于，当您调用“.load（）”时，您正在使用URL字符串和选择器后缀从加载的内容中提取。当您以这种方式使用“.load（）”时，jQuery会删除所有脚本，不会运行它们。除了自己实现自己版本的“.load（）”，或者（更好）让加载的其他页面不是完整的HTML页面之外，您别无选择。如果在URL字符串上使用“.load（）”而不使用选择器后缀，那么jQuery将运行脚本

---

更多信息，请参阅。该错误不会被修复，但希望文档能够得到改进。

到底是什么不起作用？看起来很漂亮。我的意思是：“物种”页面加载并显示。您不应该在该页面中包含JS，而应该在主php页面中包含内容和所有JS，这样您就不会有任何问题。您还没有发布加载新页面的代码。然而，到目前为止，需要注意的一点是，您似乎在重复使用“id”值。这真是个坏主意；每个“id”在整个页面上必须是唯一的。@其用户