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!

  • Please put your code on resources like jsfiddle.net or codepen.io, so that it is clear what this is about. Or give a link to the working example - aka_SKIff
  • I will try, thanks for the advice, did not know about this possibility. - MicroRu
  • With the services did not work, here is a demo example microweber.ru/home in this example jQuery I just installed in the footer, not in js Login Star Password StarStar - MicroRu
  • Why do you use jQuery when code uses $? - Man_Borscha
  • Interest Ask. Probably because this is the only solution that I found + it works, but not completely. :( PS Maybe it’s stupid to use it, but I don’t understand it at all, I study it as needed. I read that jQuery is placed at the end of the page, otherwise it will not work, because it’s completed before the content is loaded . - MicroRu

0