Made infinite scrolling for comments, different js functions are applied to each comment. The first comments that are uploaded to the page work fine, but the following comments, which are loaded using the ajax.php file (conditionally), do not react to js at all. Comments are displayed on the topic.php page where all my js files are connected to, the connection of the same files to ajax.php (to the file where additional comments are loaded when scrolling) leads to a huge number of errors, since it turns out that we connect js files twice. I have been racking my brains for the second day, it would seem an easy task, but apparently not for a beginner. Thanks to everyone who responds!

 //Infinite scroll flag = true; $(window).scroll(function() { if($(window).scrollTop() + $(window).height() == $(document).height()){ first = $('#first').val(); limit = $('#limit').val(); idt = $('#idt').val(); no_data = true; if(flag && no_data){ flag = false; $('#loader').show(); $.ajax({ url : 'ajax.php', method: 'POST', dataType: 'html', data: { start : first, limit : limit, idt : idt }, success: function( data ) { flag = true; $('#loader').hide(); if(data !=''){ first = parseInt($('#first').val()); limit = parseInt($('#limit').val()); $('#first').val( first+limit ); $('#timeline-container').append( data ); $('.timeline-item, .timeline-inverted').waypoint({ triggerOnce: true, offset: '80%', handler: function() { jQuery(this).addClass('animated fadeInUp'); } }); }else{ alert('No more data to show'); no_data = true; } }, error: function( data ){ flag = true; $('#loader').hide(); no_data = false; alert('Something went wrong, Please contact admin'); } }); } } });
  • 2
    "different js functions are applied to each comment." - add at least one example to the question. Also - typical markup for comments. - Igor

1 answer 1

Everything is very easy and simple; you post events for different classes on the document itself, and if an element with such a class appears on the page, it will pick it up and work with it.

And yes you do not need to push this code in DomReady!

 $(document).on(eventName, '.myClassName', function(){ // тут код функции }); 

 $(document).on('click', '.myClassName', function(){ alert('Ой нажали!'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a class='myClassName'>Ткни по мне</a>

  • Thanks for your answer, unfortunately, I do not fully understand how this can be applied to my problem. That is, for example, when loading the topic.php page (where all comments are displayed), perform the append function for a div with comments that were loaded from ajax.php? But it doesn't work - Johnny Catsville
  • You need to rewrite the file that contains JS functions for comments so that comments that will be added using AJAX can also work. - Shnur
  • I did it this way, but it does not work, because there is no reaction to the div with new comments ... In general, I will still break my head, your answer has only brought me to it - Johnny Catsville
  • It is better to give the code in question, so they will help you more quickly. I don’t understand the logic of constructing a question, you see your code. The others don’t see it .... therefore no one will give you an adequate answer. - Shnur
  • Added js ajax.php call code, please check - Johnny Catsville