После ajax не работает jquery?

Question

[Александр Пешков]

Реализация кнопки "показать еще" на wordpress. Сам скрипт взят с сайта https://misha.blog/wordpress/ajax-pagination.html
Все работает, но при подгрузке новых постов перестает работать слайдер поста, как вследствие гугления выяснилось из-за того, что подгружается только в начале. Как починить не могу разобраться.
Вот сам скрипт js

jQuery(function($){
    $('#true_loadmore').click(function(){
        $(this).html('Загружаю примеры'); // изменяем текст кнопки, вы также можете добавить прелоадер
        let data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                if( data ) {
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

Еще PHP на всякий

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<script>
	var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
	var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
	var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
	var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
	</script>
	<div id="true_loadmore">Загрузить ещё</div>
<?php endif; ?>

Answer 1

[Антон]

но при подгрузке новых постов перестает работать слайдер поста

При загрузке страницы, он был инициализирован на текущих дом элементах, чтобы он работал на динамических, нужно реинициализировать плагин, или что там у вас, на вновь добавленные элементы в теле успеха аякс функции

Comments

[Александр Пешков]

Да я это понял но как реализовать в коде не знаю, плохо еще разбираюсь в js поэтому попросил помощи.

[Антон]

Alexander_peshkov, Ищите код, который отвечает на инициализацию слайдера, а-ля

$('.slider-block').slider({
someobj: somevar,
someobj: somevar,
});

[Александр Пешков]

я использовал fotorama.js и выводил так

div class="card-images">
                        <div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true"
                            data-allowfullscreen="true" trackpad="true" >
                            <?php $images = acf_photo_gallery('photos', $post->ID);
                        if (count($images)): ?>

                            <?php foreach ($images as $image): ?>

                            <img src="<?php echo $image['full_image_url']?>" alt="">

                            <?php endforeach; ?>
                            <?php endif; ?>
                            <!--                    тут фото карточки-->
                        </div>
                    </div>

[yarnstart]

Alexander_peshkov,
В Исходниках фоторамы можно найти кусок кода, отвечающий за инициализацию библиотеки на моменте DOMContentLoaded:

$(function () {
  $('.' + _fotoramaClass + ':not([data-auto="false"])').fotorama();
});

Когда вы выводите изначальное состояние на страницу (1 страница пагинации), карточки инициализируются кодом из фоторамы, а далее - нужно делать это самому.
Соответственно, вам нужно после добавления новых карточек на страницу - инициализировать их, кусок кода выше.

[Александр Пешков]

Я нашел такой кусок кода

d(function () {
        d("." + ib + ':not([data-auto="false"])').fotorama()
    })

но что дальше делать в ступоре)

[Александр Пешков]

Получается что его нужно тут применить?

jQuery(function($){
    
    $('#true_loadmore').click(function(){
        $(this).html('Загружаю примеры'); // изменяем текст кнопки, вы также можете добавить прелоадер
        let data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                console.log(data);
                if( data ) {
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });
});

[Александр Пешков]

Евгений, Я нашел этот кусок, точнее добавил из документации а data-auto: сделал false. Подскажете пожалуйста как инициализировать в коде выше?

[yarnstart]

Alexander_peshkov, После

$('#true_loadmore').text('Загрузить ещё').before(data);

В success callback, Вам нужно вызвать код инициализации :

$('.' + _fotoramaClass + ':not([data-auto="false"])').fotorama();
// В вашем случае $('.fotorama:not([data-auto="false"])').fotorama();

Зачем вы сделали data-auto=false ? В вашем случае его можно оставить, иначе первая страница инициализироваться не будет.
Я не пользовался фоторамой, у меня под рукой подобного стенда нет,
В теории если вызывать каждый раз

$('.fotorama:not([data-auto="false"])').fotorama();

после подгрузки новой страницы - то в выборку будут попадать уже инициализированные элементы и могут возникнуть баги.

[yarnstart]

Alexander_peshkov,

Вот вам тестовый стенд, где есть эмуляции кнопки "показать еще", нажимаете кнопку - добавляются новые карточки и у них работает фоторама ( в данном стенде фоторама выражается кнопкой фуллскрина в правом верхнем углу картинки )

[Александр Пешков]

Евгений, Спасибо вам большое! Буду учить javascript

[yarnstart]

Alexander_peshkov, переписал в ответ, отметьте его решением для тех, кто зайдет на этот вопрос в будущем.

Answer 2

[Марти Макфлай]

Просто повесьте клик на что-то, что изначально есть на странице, например на body

$('body').on("click", "#true_loadmore", () => {...});

Comments

[Александр Пешков]

Сделал так, не работает (((

jQuery(function($){
    $('body').on("click", "#true_loadmore", () => {
        $(this).html('Загружаю примеры'); // изменяем текст кнопки, вы также можете добавить прелоадер
        let data = {
            'action': 'loadmore',
            'query': true_posts,
            'page' : current_page
        };
        
        $.ajax({
            url:ajaxurl, // обработчик
            data:data, // данные
            type:'POST', // тип запроса
            success:function(data){
                if( data ) {
                    
                    $('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
                    current_page++; // увеличиваем номер страницы на единицу
                    if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
                } else {
                    $('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                }
            }
        });
    });   
});

[Марти Макфлай]

Alexander_peshkov, неправильно вопрос прочёл. Что за слайдер используете? Сдаётся мне, что новые посты в слайдер нужно вставлять через специальный метод этого слайдера, а не так напрямую.

Answer 3

[Станислав Шендаков]

В консоль выводится что-нибудь?

Comments

[Александр Пешков]

да выводилось JQMIGRATE: Migrate is installed, version 1.4.1 и init popups ✔

[Станислав Шендаков]

В success поток управления попадает? Напишите что-то вроде ...success:function(data){ console.log( data )...

[Александр Пешков]

Все те же сообщения

[Марти Макфлай]

Alexander_peshkov, А в нетворке что? Запрос отправляется вообще? Клик срабатывает?

Answer 4

[yarnstart]

Ответ:

После

$('#true_loadmore').text('Загрузить ещё').before(data);

В success callback, Вам нужно вызвать код инициализации :

$('.' + _fotoramaClass + ':not([data-auto="false"])').fotorama();
// В вашем случае $('.fotorama:not([data-auto="false"])').fotorama();

Пример