Сценарий за пределами $ (документ) .ready - PullRequest
Новая
       22

Сценарий за пределами $ (документ) .ready

2 голосов
/ 23 мая 2011

Я создал сайт для клиента, и когда пользователь нажимает навигационную ссылку, содержимое связанной страницы динамически загружается и переносится с помощью JQuery вместо загрузки новой страницы.

Проблема, с которой я столкнулся, заключается в том, что, поскольку она не загружает новую страницу, $ (document) .ready не запускается снова, и любой JS на отдельных страницах прерывается. Например, если вы посещаете http://www.woodlandexotica.com/species.php, страница работает правильно, но если вы пытаетесь перейти на страницу из http://www.woodlandexotica.com/index_dev.php,, JS не будет работать.

Я не эксперт в JS, и я действительно ценю любую помощь!

Ответы [ 2 ]

1 голос
/ 23 мая 2011

Проблема в том, что когда вы вызываете ".load ()", вы используете строку URL и суффикс селектора для извлечения из загруженного содержимого.Когда вы используете «.load ()» таким образом, jQuery удаляет все сценарии, а не запускает их. С этим ничего нельзя поделать, кроме как реализовать собственную версию ".load ()"сами, или (лучше), чтобы другие загружаемые вами страницы , а не были полными страницами HTML.Если вы используете «.load ()» без суффикса селектора в строке URL, тогда jQuery не запускает сценарии.

Подробнее см. Ошибка jQuery 6307 .Ошибка не будет исправлена, но, надеюсь, документация будет улучшена.

0 голосов
/ 23 мая 2011

То, как вы организовали этот код, неверно

Сохраняйте только привязки внутри документа .ready и перемещайте логику в функции ..., к которым может обращаться любая страница. 

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

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

});
...