Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как заставить работать плагин с динамически добавленными элементами? (https://javascript.ru/forum/jquery/62384-kak-zastavit-rabotat-plagin-s-dinamicheski-dobavlennymi-ehlementami.html)

decadent42 07.04.2016 23:18
Как заставить работать плагин с динамически добавленными элементами?
 
Привет! Есть сайт, на сайте подключён плагин 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>

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

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

рони 08.04.2016 15:00
decadent42,
в каком месте вы ставили этот код?

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

decadent42 08.04.2016 15:21
Там где подключается плагин.

рони 08.04.2016 15:22
decadent42,
в 8 строке этот код должен быть

decadent42 08.04.2016 15:40
Пробовал:
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

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

decadent42 08.04.2016 16:23
А что ещё нужно добавить? выполнение ajax происходит в отдельном файле. Файл подключён к странице:
Код:
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/loadmore.js"></script>
Вот и выводит в консоли, что эта функция неизвестна.

рони 08.04.2016 16:27
decadent42,
можно только гадать, не зная ваш код

decadent42 08.04.2016 16:39
Так кода тут почти и нет. Вот скрипт, который подгружает изображения:
jQuery(function($){
	$('#true_loadmore').click(function(){
		$(this).text('Загружаю...'); // изменяем текст кнопки
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					$('.image').append(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
                    $('.image').justifiedGallery('norewind');
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
                    
				}
			}
		});
	});
});


А вот то, что находится на странице:
<script>
            
            $('.image').justifiedGallery({
                    rowHeight : 300,
                    margins : 5,
                    captions: false
                });
              
            $(document).ready(function() {
                $(".item").fancybox({
                    width : 720,
                    height : 720
                });
            });
        </script>


Вот код страницы, который получается при нажатии кнопки (как видно стили с размерами не добавляются к новым элементам):
<div class="image justified-gallery" style="height: 450px;">
                                                                 
                                        <a href="#content-pupop" data-popup="44" class="item" style="width: 733px; height: 450px; top: 0px; left: 0px; opacity: 1;"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-7.jpg" alt="" style="width: 733px; height: 486px; margin-left: -366.5px; margin-top: -243px;"></a>
                                        
                                                                        
                                        <a href="#content-pupop" data-popup="41" class="item" style="width: 322px; height: 450px; top: 0px; left: 738px; opacity: 1;"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-5.jpg" alt="" style="width: 322px; height: 486px; margin-left: -161px; margin-top: -243px;"></a>
                                        
                                                                        
                                        <a href="#content-pupop" data-popup="39" class="item" style="width: 321px; height: 450px; top: 0px; left: 1065px; opacity: 1;"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-4.jpg" alt="" style="width: 321px; height: 484px; margin-left: -160.5px; margin-top: -242px;"></a>
                                        
                                                                                                    
    			
			<a href="#content-pupop" data-popup="37" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-3.jpg" alt=""></a>
			
						
			<a href="#content-pupop" data-popup="35" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-2.jpg" alt=""></a>
			
						
			<a href="#content-pupop" data-popup="33" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo.jpg" alt=""></a>
			
			    
    			
			<a href="#content-pupop" data-popup="37" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-3.jpg" alt=""></a>
			
						
			<a href="#content-pupop" data-popup="35" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo-2.jpg" alt=""></a>
			
						
			<a href="#content-pupop" data-popup="33" class="item"><img src="http://alicelain.local/wp-content/uploads/2016/03/photo.jpg" alt=""></a>
			
			</div>


Больше ничего нет.

рони 08.04.2016 17:03
decadent42,
не могу ничего добавить ... нужен живой макет

decadent42 08.04.2016 17:05
И что посоветуете делать?

рони 08.04.2016 17:10
decadent42,
искать почему в строке 8 исчез плагин

decadent42 08.04.2016 17:18
8 строка - это я так понимаю, где аякс? А разве не нужно для отдельных файлов переинициализировать плагины?

рони 08.04.2016 17:45
decadent42,
данный плагин повторной инициализации не требует.


Часовой пояс GMT +3, время: 10:55.