通过Ajax加载单个产品内容时，变体Javascript不起作用（WooCommerce）

在我的WooCommerce商店模板中，我使用Ajax在archive-product.php页面中动态加载单个产品内容。这部分工作正常。 但是缺少选择产品变体的javascript，因此我尝试在成功的ajax请求之后将脚本添加到html中。 我可以加载脚本，但仍然无法选择产品变体。不会触发任何事件。好像我错过了什么

我的Javascript：

jQuery('.project-preview').on('click',function(){
    var theId = $(this).attr('data-project-id');
    var div = $('#product-container');

    $.ajax({
        type: "POST",
        url: singleprojectajax.ajaxurl,
        data : {action : 'load_single_product_content', post_id: theId },
        success: function(data){
            div.html(data);
            loadVariationScript();
        },
        error : function() {
        }
    });
});

function loadVariationScript () {
    jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
    jQuery.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");
}

在functions.php中

add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts(){
    wp_register_script( 'pa_script', get_stylesheet_directory_uri() . '/main.js', array('jquery'), true );
    wp_localize_script( 'pa_script', 'singleprojectajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
    wp_enqueue_script('pa_script');
}

function load_single_product_content () {
     $post_id = intval(isset($_POST['post_id']) ? $_POST['post_id'] : 0); 

     if ($post_id > 0) { 
         $the_query = new WP_query(array('p' => $post_id, 'post_type' => 'product'));
         if ($the_query->have_posts()) {
             while ($the_query->have_posts()) : $the_query->the_post();
             wc_get_template_part( 'content', 'single-product' );
         endwhile;
         } else {
             echo "There were no products found";
         }
     }  
     wp_die(); 
}

add_action('wp_ajax_load_single_product_content', 'load_single_product_content'); 
add_action('wp_ajax_nopriv_load_single_product_content', 'load_single_product_content'); 

WooCommerce脚本“添加到购物车变体.js”：

您是否尝试过：

jQuery(document).ready(function($) {
"use strict";

$('.project-preview').on('click',function(){
    var theId = $(this).attr('data-project-id');
    var div = $('#product-container');

    $.ajax({
        type: "POST",
        url: singleprojectajax.ajaxurl,
        data : {action : 'load_single_product_content', post_id: theId },
        success: function(data){
            div.html(data);
        },
        complete: function(){
            loadVariationScript();
        },
        error : function() {
        }
    });
});

function loadVariationScript() {
    $.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");
    $.getScript("www.yoursitenamehere.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.js");
}

}))

您在AJAX中使用了

$

，因此可以安全地假设您已经处于文档就绪环境中。因此，您不需要使用

jQuery

---

我将

$.getScript（）

放在

complete

ajax方法中。另外，您还需要将整个url包含到页面中。

只是好奇为什么要加载add-to-cart-variation.min.js和add-to-cart-variation.js？似乎您只想加载add-to-cart-variation.min.js。我测试了这个，它对我来说非常有用。我只是从OP复制了代码，tbh我可能会完全不同。