Задать вопрос
@Dark19
javascript

Как подгружать контента через load, чтобы работали скрипты на элементах?

Здравствуйте! Подгружаю содержимое страниц на wordpress через load в jquery. Не знаю, может и некротема, но ничего толкового в инете не нашел. В общем гружу этим скриптом 
$(document).on('click', 'a',function(e){
            if($(this).is('a:not([data-fancybox])') && $(this).is('a[href^="'+site_url+'"]')){
                //e.preventDefault();
                locationPrev = window.location.href;
                var url = $(this).attr('href'),
                    toLoad = url+' #wrapper',
                    content = $('#ajax-content'),
                    opacityContent = $('#content');
                opacityContent.animate({opacity: 0.1},loadContent());
                function loadContent(){
                    setTimeout(function (){
                        content.load(toLoad,'',showNewContent());
                    },300);
                }
                function showNewContent(){
                    $('html,body').animate({scrollTop: 0}, 500);
                    opacityContent.animate({opacity: 1});
                }

                // А вот так просто меняется ссылка
                if(url != window.location){
                    window.history.pushState(null, null, url);
                }
                return false;
            }
        });

Вот структура: 
<body>
<div id="ajax-content">
    <div class="wrapper" id="wrapper">
<?php get_header();
    <main class="content" id="content">

        <!--content-->

    </main>
<!-- .content -->

get_footer(); ?>
</div>
<!-- .wrapper -->
</div>
</body>

Все грузится норм, но есть проблема: после подгрузки контента не работают js скрипты на элементах, если бы один скрипт, то ладно, загрузил бы его через jquery, но у меня их больше. Скрипты загружаю в футере, но заметил, что после подгрузки контента они где-то пропадают. Может как то можно заделегировать подгружаемый контент или ещё есть какие варианты?
  • Вопрос задан
  • 507 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@Dark19 Автор вопроса
В общем пришлось подключать нужные скрипты для плагинов при загрузке анонимной функцией и все заработало: 
$(document).on('click', 'a',function(e){
            if($(this).is('a:not([data-fancybox])') && $(this).is('a[href^="'+site_url+'"]')){
                //e.preventDefault();
                locationPrev = window.location.href;
                var url = $(this).attr('href'),
                    toLoad = url+' #wrapper',
                    content = $('#ajax-content'),
                    opacityContent = $('#content');
                opacityContent.animate({opacity: 0.1},loadContent());
                function loadContent(){
                    setTimeout(function (){
                        content.load(toLoad,'',function(r, s, x){
                            $.getScript(home_url+"/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js");
                            $.getScript(home_url+"/wp-content/plugins/contact-form-7/includes/js/scripts.js");
                            $.getScript(template_dir+"/js/map.js");
                            $('html,body').animate({scrollTop: 0}, 500);
                            opacityContent.animate({opacity: 1},500);
                        });
                    },300);
                }

                // А вот так просто меняется ссылка
                if(url != window.location){
                    window.history.pushState(null, null, url);
                }

                return false;
            }
        });

Суть такова, что контент который подгружается не виден для скриптов и соответственно они на нем не срабатывают. Может его можно заделегировать как ссылки например, чтобы после подгрузки он был виден, не знаю. Увы другого способа не нашел.
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
Gori4ka
@Gori4ka
WordPress Developer
у тебя get_footer(); находится в нутри тега с классом .wrapper и когда ты подгружаешь страницу ты все загруженые скрипты и стили перезатераешь вот и не работает должным образом
Ответ написан
6 комментариев
6 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Технический специалист / интегратор / разработчик (Javascript, PHP, WordPress)
HRScan
от 1 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка LMS платформы для обучения учеников IT курсам
09 янв. 2025, в 22:40
150000 руб./за проект
Продвинуть сайт - сео
09 янв. 2025, в 21:26
30000 руб./за проект
Оффлайн языковая модель в голосового помощника
09 янв. 2025, в 21:05
10000 руб./за проект
Ещё заказы