title: Reload this javascript file after an ajax page load (YITH Infinite Scroll)
body: <p>I have a woocommerce shop that has an ajax page load navigation. So a user clicks next page and more products are loaded via ajax.</p>
  
  <p>However, I have a javascript file that manipulates the colors on each product on a page load. But since I have introduced this ajax page load, the script no longer loads after a next page is requested.</p>
  
  <p>I am using YITH Infinite Page scroll. They have a trigger <code>yith_infs_added_elem</code> that I can use to do some code after the ajax has been loaded.</p>
  
  <p>So I currently have:</p>
  
  <pre><code>jQuery(document).on('yith_infs_added_elem', function() {
  
  });
  </code></pre>
  
  <p>This is the YITH trigger I have to use to run my script after the ajax has loaded.</p>
  
  <p>But I am stuck. I have read many other solutions for other people, but I cannot seem to figure out how to reload my javascript file - <code>/js/javascript/colors/dominant-color-shop.js</code>.</p>
  
  <p>My javascript file that normally runs on page load is:</p>
  
  <pre><code>jQuery( document ).ready( function( $ ) {
      var image = new Image;
      var colorThief = new ColorThief();
      var bg;
      var vibrant_color;
      var vibrantText;
  
      $('.post-image-hidden-container').each(function() {
          bg = $(this).text();
          var rgbs_text = [];
  
          image.onload = function() {
  
              $('.shop-page-item-thumb').each(function() {
                  var thumb = $(this);
                  var rgbs = [];
  
                  thumb.find('img').each(function() {
                      var vibrant = new Vibrant(this);
                      var swatches = vibrant.swatches();
  
                      var dominantColor = colorThief.getColor(this);
                      var productColorPalette = colorThief.getPalette(this, 12);
                      var productLightestColor = productColorPalette.reduce(function(previousValue, currentValue) {
                          var currLightNess = (0.2126*currentValue[0] + 0.7152*currentValue[1] + 0.0722*currentValue[2]);
                          var prevLightNess = (0.2126*previousValue[0] + 0.7152*previousValue[1] + 0.0722*previousValue[2]);
                          return (prevLightNess &lt; currLightNess) ? currentValue : previousValue;
                      });
  
                      /* Create Shades and Tints of Lightest Color */
                      var lightShadeRGB = productLightestColor.join();
                          lightShadeRGB = lightShadeRGB.split(',');
                      var r = lightShadeRGB[0],
                          g = lightShadeRGB[1],
                          b = lightShadeRGB[2];
                      var rpt = lightShadeRGB[0] - 35,
                          gpt = lightShadeRGB[1] - 35,
                          bpt = lightShadeRGB[2] - 35;
                      var tintDk = 'rgb('+rpt+', '+gpt+', '+bpt+')';
  
                      for (var swatch in swatches) {
                          if (swatches.hasOwnProperty(swatch) &amp;&amp; swatches[swatch]) {
                              rgbs.push(swatches[swatch].getHex());
                              rgbs_text.push(swatches[swatch].getTitleTextColor());
                          }
                      }
  
                      vibrant_color = rgbs[0];
                      vibrant_color_2 = rgbs[1];
                      darkVibrant = rgbs[2];
                      darkMuted = rgbs[3];
                      lightVibrant = rgbs[4];
  
                      vibrantText = rgbs_text[0];
                      vibrantText_2 = rgbs_text[1];
                      darkVibrantText = rgbs_text[2];
                      darkMutedText = rgbs_text[3];
                      lightVibrantText = rgbs_text[4];
  
                      thumb.parent().find('.product-bottom-info-container').css({
                          borderTop: '4px solid ' + vibrant_color
                      });
  
                      thumb.parent().find('.hot-badge').css({
                          backgroundColor: darkMuted,
                          color: darkMutedText
                      });
  
                      thumb.parent().find('.mp3-badge').css({
                          backgroundColor: vibrant_color,
                          color: vibrantText
                      });
  
                      thumb.parent().find('.mp3-badge-link').css({
                          color: vibrantText
                      });
  
                      thumb.parent().find('.wav-badge').css({
                          backgroundColor: vibrant_color_2,
                          color: vibrantText_2
                      });
  
                      thumb.parent().find('.wav-badge-link').css({
                          color: vibrantText_2
                      });
  
                      thumb.parent().find('.hot-post-bookmark').css({
                          color: vibrant_color
                      });
  
                      thumb.parent().find('.the-rating-stars-icons').css({
                          color: vibrant_color
                      });
  
                      thumb.parent().find('.progress-bar').css({
                          backgroundColor: vibrant_color
                      });
                  });
              });
          }
          image.src = bg;
      });
  
      $('#player-toggler-id').css({
          backgroundColor: '#181f24'
      });
  });
  </code></pre>
  
  <p>It works fine until I request the next page. The javscript no longer works. How exactly can I call this script all over again, once the yith ajax has loaded with this trigger - <code>yith_infs_added_elem</code>.</p>
  
  <p>I have read up on .on() .live() (which is deprecated), etc. Can anyone help?</p>