Faced with a hopeless, in my opinion, the situation. I make for the site the function of reducing long content and display it on the same page after pressing a button. Installed jquery, set up a div and was happy, it works. After a while, I decided to familiarize myself with the earlier content and clicked on the "Show more" button. :)
Those. news is uploaded to the same page, without reloading. In general, the jquery code does not process the newly loaded content, as I just did not try to excel, I could not do anything.
jquery put in the bottom of the page, as read on the Internet.
Tell me, please, maybe there is an opportunity to make jquery respond to the newly uploaded content?
Found a js file in which the code of the function call is written onclick = "SK_loadOldStories ();" responsible for uploading new content.
Button code:
<div align="center"> <div class="load-btn" onclick="SK_loadOldStories();"> <i class="icon-reorder progress-icon hide"></i> <?php echo $lang['view_previous_posts_label']; ?> </div> </div>
Apparently, the simplest solution is to insert my jQuery code into this code. Logically, it (jQuery code), apparently, will be updated at the time of clicking on the "See previous posts" button, which is what is required.
This is js code itself, in which I found onclick="SK_loadOldStories();"
.
Start 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); }); }
Next, another js.
End 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); }); }
I tried to insert my jQuery code into the above js, in different places - either the download button of old posts does not work at all, or posts are reduced on the main one, but when loading old posts they are not reduced, or it works in an interesting way: the main one is loaded - the posts are not reduced, I press The button "View previous posts", at the time of loading previous posts, reduces the pages previously loaded at the start and are working, but the newly loaded ones are not cut! If the second time you click on the button "View previous posts", all the same will happen, but the abbreviated posts, those that were loaded at the start of the page, are no longer revealed ...
Help, please, correctly insert my jQuery code into the above js, so that when you click on the "View previous posts" button, not only old posts will appear, but also my jQuery code will be updated.
PS If I, of course, are right in all this mechanism ... And my jQuery code can really be inserted here.
My jQuery code is:
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() ); });
Thank!