添加到愿望清单按钮在漂亮的照片脚本中不起作用

Question

我不知道为什么我的 prettyphoto 脚本不再运行。我已经阅读了其他帖子，他们似乎只是假设 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 链接，并且功能会按预期返回。