Есть лента новостей, вытаскивается из 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();
});
});
}
}
});
});
});
});
