Как заставить работать плагин с динамически добавленными элементами?

[decadent42]

Привет! Есть сайт, на сайте подключён плагин Justified Gallery, который создаёт горизонтальную сетку масонри и заполняет всю страницу картинками так. Под картинками в самом конце расположена кнопка "Показать ещё", при нажатии на которую аяксом подгружаются ещё картинки, с первой страницей всё работает, но при подгрузки новых картинок происходит вполне логичная вещь - плагин их не выравнивает, потому что при загрузке дерева dom этих элементов не было. Но это я так сам догадываюсь, может я и не прав. Как быть? Что делать? Сижу над этой проблемой уже 3 дня. Пробовал .on, но какой тип обработчик указывать? Ведь read - не поддерживается в нём (вставлял 'load' -реакции ноль), пробовал запускать плагин повторно через ajaxSetup, где вызывал эту функцию в complete - тоже ноль. Как быть? Помогите! А то уже крыша едет от этой фигни.

Аякс запрос:

$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					$('.image').append(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                    
				}
			}
		});

Подключение плагина на странице:

$('.image').justifiedGallery({
                    rowHeight : 300,
                    margins : 5,
                    captions: false
                });

Html-код элемента где выводятся картинки (с первой порцией картинок, к которым подгружаются другие):

<div class="image justified-gallery" style="height: 450px;">
                                                                 
                                        <a href="#content-pupop" data-popup="44" class="item" style="width: 755px; height: 450px; top: 0px; left: 0px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-7_b.jpg" alt="" style="width: 755px; height: 500px; margin-left: -377.5px; margin-top: -250px;"></a>
                                        
                                                                        
                                        <a href="#content-pupop" data-popup="41" class="item" style="width: 332px; height: 450px; top: 0px; left: 760px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-5.jpg" alt="" style="width: 332px; height: 501px; margin-left: -166px; margin-top: -250.5px;"></a>
                                        
                                                                        
                                        <a href="#content-pupop" data-popup="39" class="item" style="width: 330px; height: 450px; top: 0px; left: 1097px; opacity: 1;"><img src="http://demo.local/wp-content/uploads/2016/03/photo-4.jpg" alt="" style="width: 330px; height: 498px; margin-left: -165px; margin-top: -249px;"></a>
                                        
</div>

<div id="true_loadmore">Загрузить ещё</div>

[рони]

decadent42,
здесь помедитировать не пробовали?
http://miromannino.github.io/Justifi...ndless-scroll/

[decadent42]

Да, пробовал. Но как это использовать с аякс запросом? Когда просто указываю $('.image').justifiedGallery('norewind'); - ничего не происходит.

[рони]

decadent42,
в каком месте вы ставили этот код?

[decadent42]

На html странице, пробовал и в succes, но там, понятное дело, ошибку выдало

[decadent42]

Там где подключается плагин.

[рони]

decadent42,
в 8 строке этот код должен быть

[decadent42]

Пробовал:

success:function(data){
				if( data ) { 
					$('.image').append(data); // вставляем новые посты
                    $('.image').justifiedGallery('norewind');
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                    
				}
			}

Выдаёт ошибку: Uncaught TypeError: $(...).justifiedGallery is not a function

[рони]

decadent42,
значит что-то не договариваите про инициализацию плагина или про $

[decadent42]

А что ещё нужно добавить? выполнение ajax происходит в отдельном файле. Файл подключён к странице:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/loadmore.js"></script>

Вот и выводит в консоли, что эта функция неизвестна.