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

Question

Dark19 @Dark19

Как подгружать контента через 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, но у меня их больше. Скрипты загружаю в футере, но заметил, что после подгрузки контента они где-то пропадают. Может как то можно заделегировать подгружаемый контент или ещё есть какие варианты?

Вопрос задан более трёх лет назад
511 просмотров

Комментировать

Подписаться 1 Оценить Комментировать

Answer 1 · 2017-02-17 13:15:25

В общем пришлось подключать нужные скрипты для плагинов при загрузке анонимной функцией и все заработало:

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

Суть такова, что контент который подгружается не виден для скриптов и соответственно они на нем не срабатывают. Может его можно заделегировать как ссылки например, чтобы после подгрузки он был виден, не знаю. Увы другого способа не нашел.

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

Войдите на сайт