Add to wishlist button not working in a Pretty Photo script

Question

I cannot figure out why my prettyphoto script is no longer running. I have read other posts and they seem to just assume jQuery is not loaded in correctly or in the correct order.

Why wouldn't this be working as planned?

Functions.php:

function hubble_space_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('slick-scripts', get_template_directory_uri() . '/js/slick.js', array(), null, true);

    wp_enqueue_script('hubble-space-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true);
    wp_enqueue_script('hubble-space-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true);
    wp_enqueue_script('pretty-photo-scripts', get_template_directory_uri() . '/js/pretty-photo.js', array(), null, true);
    wp_enqueue_script('hubble-space-theme-script', get_template_directory_uri() . '/js/hubble-space.min.js', array(), '20151215', true);
    wp_enqueue_script('ready-functions-scripts', get_template_directory_uri() . '/js/ready-functions.js' . '?' . date("ymdhis"), array(), null, true);
}
add_action('wp_enqueue_scripts', 'hubble_space_scripts');

HTML Output:

 <li class="product type-product post-2048 status-publish first instock product_cat-uncategorized product_tag-aesthetic product_tag-hard product_tag-thermoconductive has-post-thumbnail shipping-taxable product-type-simple">
  <a href="example.com/material/diamond/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link"><img width="300" height="300" src="example.com/wp-content/uploads/2018/09/diamond-foil-300x300.jpeg" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="diamond foil" srcset="example.com/wp-content/uploads/2018/09/diamond-foil-300x300.jpeg 300w, example.com/wp-content/uploads/2018/09/diamond-foil-150x150.jpeg 150w, example.com/wp-content/uploads/2018/09/diamond-foil-100x100.jpeg 100w, example.com/wp-content/uploads/2018/09/diamond-foil-80x80.jpeg 80w" sizes="(max-width: 300px) 100vw, 300px"></a>
  <!-- INFORMATIVE ICONS -->
  <div class="product-info">
   <a href="example.com/material/diamond/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
    <h2 class="woocommerce-loop-product__title">Diamond</h2>
   </a>
   <div class="product-actions">
    <a href="example.com/material/diamond/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
    </a>
    <div class="product-catelog-link"><a href="example.com/material/diamond/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
     </a><a href="http://www.goodfellow.com/catalogue/GFCatalogue.php?Language=E" class="box-link"></a>
     <img class="product-has-feature-image catelog-feature" src="/wp-content/uploads/2020/02/basket.png" alt="catelog link">
    </div>
    <div class="yith-wcwl-add-to-wishlist add-to-wishlist-2048">
     <div class="yith-wcwl-add-button show" style="display:block">
      <!-- WISHLIST POPUP OPENER -->
      <a href="#add_to_wishlist_popup_2048_1627862832" rel="nofollow" class="add_to_wishlist open-pretty-photo" data-rel="prettyPhoto[add_to_wishlist_2048_1627862832]">
      Add to My Materials   </a>
      <!-- WISHLIST POPUP -->
      <div id="add_to_wishlist_popup_2048_1627862832" class="yith-wcwl-popup">
       <form class="yith-wcwl-popup-form" method="post" action="/wp-admin/admin-ajax.php?add_to_wishlist=2048">
        <div class="yith-wcwl-popup-content">
         <div class="yith-wcwl-first-row">
          <div class="yith-wcwl-wishlist-select-container">
           <h3>Select a board for Diamond</h3>
           <select name="wishlist_id" class="wishlist-select">
            <option value="0" selected="selected">My Materials</option>
            <option value="96">My Rods</option>
            <option value="95">My Copolymers</option>
            <option value="94">My Polys</option>
            <option value="new">Create a new board</option>
           </select>
          </div>
         </div>
         <div class="yith-wcwl-second-row">
          <div class="yith-wcwl-popup-new">
           <label for="wishlist_name">Board name</label>
           <input name="wishlist_name" class="wishlist-name" type="text">
          </div>
          <div class="yith-wcwl-visibility">
           <select name="wishlist_visibility" class="wishlist-visibility">
            <option value="0" class="public-visibility">Public</option>
            <option value="1" class="shared-visibility">Shared</option>
            <option value="2" class="private-visibility">Private</option>
           </select>
          </div>
         </div>
        </div>
        <div class="yith-wcwl-popup-footer">
         <div class="yith-wcwl-popup-button">
          <img src="example.com/wp-admin/images/wpspin_light.gif" class="ajax-loading" alt="loading" width="16" height="16" style="visibility:hidden">
          <a rel="nofollow" class="wishlist-submit add_to_wishlist popup_button" data-product-id="2048" data-product-type="simple">
          Add
          </a>
         </div>
        </div>
       </form>
      </div>
     </div>
     <div class="yith-wcwl-wishlistaddedbrowse hide" style="display:none;">
      <span class="feedback">Item added!</span>
      <!-- rel="nofollow" -->
      <a href="example.com/my-materials/">
      Browse My Materials     </a>
     </div>
     <div class="yith-wcwl-wishlistexistsbrowse hide" style="display:none">
      <span class="feedback">The item has already been added!</span>
      <!-- rel="nofollow" -->
      <a href="example.com/my-materials/">
      Browse My Materials     </a>
     </div>
     <div style="clear:both"></div>
     <div class="yith-wcwl-wishlistaddresponse"></div>
    </div>
    <div class="product-has-other-forms">
     <p class="product-has-other-forms-text">
      Available in<br>
      multiple forms
     </p>
    </div>
   </div>
  </div>
  <div class="product-has-properties">
   <div class="product-is-green-contain">
   </div>
   <div class="product-category-contain"></div>
  </div>
  <!-- END INFORMATIVE ICONS -->
  <div class="clear"></div>
 </li>

Console:

pretty-photo.js:1 Uncaught ReferenceError: $pp_overlay is not defined
    at Object.$.prettyPhoto.close (pretty-photo.js:1)
    at Object.success (jquery.yith-wcwl.js?ver=2.2.1:1)
    at i (jquery.js?ver=1.12.4-wp:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
    at x (jquery.js?ver=1.12.4-wp:4)
    at XMLHttpRequest.c (jquery.js?ver=1.12.4-wp:4)
        $.prettyPhoto.close @   pretty-photo.js:1
        success @   jquery.yith-wcwl.js?ver=2.2.1:1
        i   @   jquery.js?ver=1.12.4-wp:2
        fireWith    @   jquery.js?ver=1.12.4-wp:2
        x   @   jquery.js?ver=1.12.4-wp:4
        c   @   jquery.js?ver=1.12.4-wp:4
        XMLHttpRequest.send (async)     
        send    @   jquery.js?ver=1.12.4-wp:4
        ajax    @   jquery.js?ver=1.12.4-wp:4
        (anonymous) @   jquery.yith-wcwl.js?ver=2.2.1:1
        (anonymous) @   jquery.yith-wcwl.js?ver=2.2.1:1
        dispatch    @   jquery.js?ver=1.12.4-wp:3
        r.handle

Answer 1

(Posted a solution from the question author to move it from the question).

I have been using an AJAX request to populate my products, this is happening after the PrettyPhoto script has ran, therefore I must re-enable the PrettyPhoto once the new products are loaded into the page like this:

// REENABLE PRETTY PHOTO AFTER AJAX CALLS
function ReenablePrettyPhoto() {
    console.log('Reenable function is running!');

    setTimeout(function() {

        console.log('Reenable function waited, and has now ran!');

        var prettyPhotoLinks = $("a[data-rel^='prettyPhoto']")
        if (prettyPhotoLinks.length) {
            prettyPhotoLinks.each(function(){
                $(this).prettyPhoto();
            });
        }

    }, 1000);

}
// END REENABLE PRETTY PHOTO AFTER AJAX CALLS

I then must run the function every time the products are reloaded:

ReenablePrettyPhoto();

This will then recreate the PrettyPhoto links and the functionality returns to as expected.