JS problem with Infinite scroll

The CMS Questions
1

Hi to all,

I made infinite scroll, but have problem with compare JS
that add items to compare box

when begin page is loaded everything is fine, but when pages starts loads by Ajax new items stop works

Here is part of JS that add items to compare. I’m read about http://api.jquery.com/ajaxcomplete/ function but don’t understand how and where to insert and what code

var fixedBottomBar = $('.compare');
var closeBottomBar = $('.close-button.squared');
var closeButton = $('.close-button');


// close bottom bar
closeBottomBar.on('click', function(){
  fixedBottomBar.slideUp('fast');
});

//remove item form bottom bar
closeButton.on('click', function(){
  $(this).next().attr('src', '');
  $(this).next().attr('alt', '');
  $(this).next().next().attr('value', '');
  $(this).hide();
});

$('.check-item').on('click', function(){
	
  var getSrc = $(this).parent().parent().find('img').attr('src');
  var getAlt = $(this).parent().parent().find('img').attr('alt');
  var getValue = $(this).parent().parent().find('img').attr('data-id');
  
  var things = fixedBottomBar.find('li');
  var em = 0;
    for (var i = 0; things.length > i ; i++) {
      if( $(this).is(':checked') ){
        fixedBottomBar.slideDown('fast');

        if (things.eq(i).find('img').attr('src') == '') {
          things.eq(i).find('img').attr('src',getSrc);
          things.eq(i).find('img').attr('alt',getAlt);
          things.eq(i).find('input').attr('value',getValue);
          
          closeButton.eq(i).css('display','table');
          closeBottomBar.show();
          return i = 0;
        }
      } else {
        things.each( function(em){
          if( things.eq(em).find('img').attr('src') == getSrc ){
            things.eq(em).find('img').attr('src', '');
            things.eq(em).find('img').attr('alt', '');
            things.eq(em).find('input').attr('value', '');
            
			closeButton.eq(em).hide();
          }                 
        });
      }
    };

});

I will be very grateful for any help

https://99bookmakers.com/review page where compare works before Ajax and don’t work after it loads new items

2

Try this syntax:

$(document).on( 'click', '.check-item', function(){} );
1 Like
3

yes!!! As always you saved me :slight_smile: