Как решить проблему с masonry?

Question

[mountain123]

Есть лента новостей, вытаскивается из vk.com.
С помощью Masonry выстраиваются новости, как кирпичики.
Если контент внутри новости занимает более 500px появляется кнопка "раскрыть". При клике на кнопку "раскрыть" новость открывается полностью. При повторном клике - закрывается.

Есть кнопка "загрузить еще". При клике, с помощью Ajax, достается 5 новостей. Но уже не работает кнопка "раскрыть" в первых 5 новостях. А в тех которые загрузились - все работает.
Естественно после получения новостей я все перезапускаю

Дальше хуже.
Если жмем еще раз на кнопку "загрузить еще" появляются еще 5 новостей. В этой 5ке и в первой 5ке все работает , но не работает уже в предыдущей 5ке.

Выкладываю ссылку, что у меня получилось goo.gl/a3KlLg

Я в замешательстве...

$(document).ready(function(){
		//запуск masonry
		$('.grid').imagesLoaded(function() {
			$('.grid').masonry({
				itemSelector: '.grid-item',
				columnWidth: '.grid-sizer',
				gutter: '.gut',
				percentPosition: true
			});
			// если высота больше 500, то удалить кнопку "раскрыть"
			$(".grid-item div").each(function(){
				if ($(this).height() < 500){
				$(this).children(".expan").remove();
				}
			});
		});

		// функция раскрыть/скрыть 
		$(".grid-item .expan").click(function(){
			$(".grid .grid-item").css({"maxHeight": "500px"});
			$(".grid-item .expan").text("раскрыть");
			
			if ($(this).parent().parent().attr("class") == 'grid-item inn'){
				$(this).parent().parent().removeClass('inn').css({"maxHeight": "500px"});
			}
			else {
				$('.grid-item').removeClass('inn');
				$(this).text("скрыть");
				$hei = $(this).parent().height();
				$hei += 50;
				$(this).parent().parent().addClass('inn').css({"maxHeight": $hei + "px", "height": $hei + "px"});
			}
			$('.grid').imagesLoaded(function() {
				$('.grid').masonry();
			});
		});

		$("#imgLoad").hide();  // Скрываем прелоадер
		var num = 6; //чтобы знать с какой записи вытаскивать данные
		
		$(function() {
			$("#load .button").click(function(){
			$(".button").next("#imgLoad").show();

			$.ajax({
				url: "action.php",
				type: "GET",
				data: {"num": num},
				cache: false,			
				success: function(response){
					
						if (response == 0){ // Смотрим ответ от сервера и выполняем соответствующее действие
							$("#imgLoad").hide();
						}
						else {
							var $elems = $( response );
							//добавляем элементы masonry с помощью appended
							$('.grid').append( $elems ).masonry( 'appended', $elems ).imagesLoaded(function() {
								$('.grid').masonry({
									itemSelector: '.grid-item',
									columnWidth: '.grid-sizer',
									gutter: '.gut',
									percentPosition: true
								});
								// если высота больше 500, то удалить кнопку "раскрыть"
								$(".grid-item div").each(function(){
									if ($(this).height() < 500){
										$(this).children(".expan").remove();
									}
								});
							}); 
							num = num + 5;
							$("#imgLoad").hide();

							// функция раскрыть/скрыть 
							$(".grid-item .expan").click(function(){
								$(".grid .grid-item").css({"maxHeight": "500px"});
								$(".grid-item .expan").text("раскрыть");
								
								if ($(this).parent().parent().attr("class") == 'grid-item inn'){
									$(this).parent().parent().removeClass('inn').css({"maxHeight": "500px"});
								}
								else {
									$('.grid-item').removeClass('inn');
									$(this).text("скрыть");
									$hei = $(this).parent().height();
									$hei += 50;
									$(this).parent().parent().addClass('inn').css({"maxHeight": $hei + "px", "height": $hei + "px"});
								}
								$('.grid').imagesLoaded(function() {
									$('.grid').masonry();
								});
							});
						}
					}
				});
			});
		});
	});

Answer 1

[Kostya Gorozhanov]

Вместо $(".grid-item .expan").click(function(){
используйте

$(document).on('click', $(".grid-item .expan"), function(){
    //Ваш код
  })

Comments

[mountain123]

$('body').on('click', '.grid-item .expan', function(){});
вот так заработало!

Answer 2

[profesor08]

Ну вы же подгружаете новые элементы, но вы не навешываете ивенты на новые элементы с кнопками раскрыть. Вот и получаете, что пулучаете.

Comments

[mountain123]

if (response == 0){ // Смотрим ответ от сервера и выполняем соответствующее действие
$("#imgLoad").hide();
}
else{
// тут же все навешивается. Или я не там это делаю?
}