Alexander_peshkov
@Alexander_peshkov
Веб-разработчик

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

Реализация кнопки "показать еще" на 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; ?>
  • Вопрос задан
  • 123 просмотра
Решения вопроса 2
Eridani
@Eridani
Мимо проходил
но при подгрузке новых постов перестает работать слайдер поста

При загрузке страницы, он был инициализирован на текущих дом элементах, чтобы он работал на динамических, нужно реинициализировать плагин, или что там у вас, на вновь добавленные элементы в теле успеха аякс функции
Ответ написан
alex_shevch
@alex_shevch
PM, Frontend Developer
Просто повесьте клик на что-то, что изначально есть на странице, например на body
$('body').on("click", "#true_loadmore", () => {...});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
В консоль выводится что-нибудь?
Ответ написан
@eugenekazakov
Превозмогание и React
Ответ:

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

В success callback, Вам нужно вызвать код инициализации :
$('.' + _fotoramaClass + ':not([data-auto="false"])').fotorama();
// В вашем случае $('.fotorama:not([data-auto="false"])').fotorama();


Пример
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы