JQuery не реагирует на вновь подгруженный контент

Рейтинг: 0Ответов: 0Опубликовано: 15.01.2015

Столкнулся с безвыходной, на мой взгляд, ситуацией. Делаю для сайта функцию сокращения длинного контента и отображения его на той же странице по факту нажатия на кнопку. Установил jquery, настроил div и обрадовался, работает. Спустя время решил ознакомиться с более ранним контентом и нажал на кнопку "Показать еще". :)

Т.е. новости подгружаются на эту же страницу, без перезагрузки. В общем, jquery код не обрабатывает вновь подгружаемый контент, как я только не пытался изощряться, ничего не смог сделать.

jquery поставил в самый низ страницы, так, как прочел в Интернете.

Подскажите, пожалуйста, может, есть возможность заставить реагировать jquery на вновь подгруженный контент?

Нашел js файл, в котором прописан код вызова функции onclick="SK_loadOldStories();", отвечающей за подгрузку нового контента.

Код кнопки:

<div align="center">
        <div class="load-btn">
            <i class="icon-reorder progress-icon hide"></i>
            <?php
            echo $lang['view_previous_posts_label'];
            ?>
        </div>
    </div>

Видимо, самое простое решение - вставить в данный код мой jQuery код. По логике, он (jQuery код), видимо, будет обновляться в момент нажатия на кнопку "Смотреть предыдущие посты", то что и требуется.

Это сам js код, в котором я и обнаружил onclick="SK_loadOldStories();".

Начало js:

// Фильтр историй
function SK_filterStories(type, timeline_id) {
    main_wrapper = $('.story-filters-wrapper');
    filter_wrapper = main_wrapper.find('.' + type + '-wrapper');
    stories_wrapper = $('.stories-container');

    SK_progressIconLoader(filter_wrapper);

    sendData = new Object();
    sendData.t = 'post';
    sendData.a = 'filter';
    sendData.type = type;

    if (typeof(timeline_id) != "undefined") {
        sendData.timeline_id = timeline_id;
        stories_wrapper.attr('data-story-timeline', timeline_id);
    }

    stories_wrapper.attr('data-story-type', type)
        .find('.stories-wrapper').html('')
        .end()
        .find('.load-btn').fadeOut('fast');

    $.get(SK_source(), sendData, function (data) {

        if (data.status == 200) {
            stories_wrapper
                .find('.stories-wrapper')
                    .html(data.html)
                .end()
                .find('.load-btn')
                    .fadeIn('fast').attr('onclick','SK_loadOldStories();').html('<i class="icon-reorder progress-icon hide"></i> Смотреть предыдущие посты');
        }

        main_wrapper.find('.filter-active').removeClass('filter-active');
        filter_wrapper.addClass('filter-active');

        SK_progressIconLoader(filter_wrapper);

    });
}

Далее другой js.

Конец js:

// Загрузка старых историй
function SK_loadOldStories() {
    body_wrapper = $('.stories-container');
    button_wrapper = $('.stories-container').find('.load-btn');

    SK_progressIconLoader(button_wrapper);

    outgoing_data = new Object();
    outgoing_data.t = 'post';
    outgoing_data.a = 'filter';

    if ( typeof(body_wrapper.attr('data-story-type')) == "string" ) {
        outgoing_data.type = body_wrapper.attr('data-story-type');
    }

    if ( typeof(body_wrapper.attr('data-story-timeline')) =="string" ) {
        outgoing_data.timeline_id = body_wrapper.attr('data-story-timeline');
    }

    if ($('.story-wrapper').length > 0) {
        outgoing_data.after_id = $('.story-wrapper:last').attr('data-story-id');
    }

    $.get(SK_source(), outgoing_data, function (data) {

        if (data.status == 200 ) {
            $('.stories-wrapper').append(data.html);
        } else {
            button_wrapper.text('No more posts to show').removeAttr('onclick');
        }

        SK_progressIconLoader(button_wrapper);

    });
}

Пробовал вставить свой jQuery код в приведенный выше js, в разных местах - либо вообще кнопка загрузки старых постов не работает, либо посты сокращаются на главной, но при загрузке старых постов не сокращаются, либо работает интересным образом: главная загружается - посты не сокращены, жму на кнопку "Смотреть предыдущие посты", в момент подгрузки предыдущих постов, сокращаются ранее загруженные при старте страницы и работают, но вновь загруженные не сокращены! Если второй раз нажму на кнопку "Смотреть предыдущие посты", произойдет все то же самое, но сокращенные посты, те, что были загружены при старте страницы, уже не раскрываются...

Помогите, пожалуйста, корректно вставить мой jQuery код в приведенный выше js, чтобы по нажатию на кнопку "Смотреть предыдущие посты", появлялись не только старые посты, но и обновлялся мой jQuery код.

P.S. Если я, конечно, прав во всем этом механизме... И мой jQuery код действительно можно сюда вставить.

Мой jQuery код:

jQuery(".text-wrapper").each(function(){
    var review_full = jQuery(this).html();
    var review = review_full;

    if( review.length > 500 )
    {
        review = review.substring(0, 500);
        jQuery(this).html( review + '<div class="read_more" align="center" style="cursor:pointer"> РАЗВЕРНУТЬ...</div>' );
    }
    jQuery(this).append('<div class="full_text" style="display: none;">' + review_full + '</div>');
});

jQuery(".read_more").click(function(){
    jQuery(this).parent().html( jQuery(this).parent().find(".full_text").html() );
});

Спасибо!

Ответы

Ответов пока нет.