添加到心願單按鈕在漂亮照片腳本中不起作用

Question

我不明白為什么我的漂亮照片腳本不再運行。 我讀過其他帖子，他們似乎只是假設 jQuery 沒有正確加載或以正確的順序加載。

為什么這不能按計划進行？

函數.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 輸出：

 <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>

安慰：

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

（發布問題作者的解決方案以將其從問題中移出） 。

我一直在使用 AJAX 請求來填充我的產品，這是在 PrettyPhoto 腳本運行后發生的，因此一旦新產品加載到頁面中，我必須重新啟用 PrettyPhoto，如下所示：

// 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

每次重新加載產品時，我都必須運行該功能：

ReenablePrettyPhoto();

然后，這將重新創建 PrettyPhoto 鏈接，並且功能將按預期返回。