Php 通过AJAX和商业产品JS加载WP_查询

我计划创建一个菜单来动态排序我的产品。每次选择排序方法（即按价格）时，我都希望刷新产品，并在新的WP_查询中加载ajax调用

到目前为止，我通过一个触发AJAX调用的按钮成功地加载了产品，但我的问题是，一旦产品加载，它们的正常功能就会出现一些问题

产品是可变的，通常当您选择了您喜欢的可变选项时，会输出价格。这种情况不再发生，我想知道如何刷新变量产品的JS，使其工作

下面是my functions.php的外观

//Enqueue Ajax Scripts
function enqueue_product_show_ajax() {
    wp_register_script( 'product-show-ajax-js', get_template_directory_uri() .   '/js/product-show-ajax.js', array( 'jquery' ), '', true );
    wp_localize_script( 'product-show-ajax-js', 'product_show_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
    wp_enqueue_script( 'product-show-ajax-js' );
}
add_action('wp_enqueue_scripts', 'enqueue_product_show_ajax');

function ajax_show_product() {

    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 12,
        // Indicate the product category - in this case "Training"
        'product_cat' => 'training',
        'orderby' => '_price',
        'order' => 'desc'
    );
    $loop = new WP_Query( $args );
    if ( $loop->have_posts() ) {
        while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="product-node">
            <?php wc_get_template_part( 'content', 'single-product' ); ?>
            </div>
        <?php endwhile;
    }
    wp_reset_postdata();

    die();

}

//Add Ajax Actions
add_action('wp_ajax_show_product', 'ajax_show_product');
add_action('wp_ajax_nopriv_show_product', 'ajax_show_product');

//将Ajax脚本排队
函数排队\u产品\u显示\u ajax（）{
wp_register_script（'product show ajax js'，get_template_directory_uri（）。/js/product show ajax.js'，array（'jquery'），''，true）；
wp_本地化_脚本（'product show ajax js'，'product_show_ajax'，数组（'ajax_url'=>admin_url（'admin ajax.php'））；
wp_enqueue_脚本（'product show ajax js'）；
}
添加动作（“wp_排队_脚本”，“排队_产品_展示_ajax”）；
函数ajax\u show\u product（）{
$args=数组(
“post_类型”=>“产品”，
“每页帖子数”=>12，
//指明产品类别-在本例中为“培训”
“产品类别”=>“培训”，
'orderby'=>'U price'，
“订单”=>“描述”
);
$loop=新的WP_查询（$args）；
如果（$loop->have_posts（））{
而（$loop->have_posts（））：$loop->the_post（）；？>
也许有一种方法可以在functions.php文件中禁用WooCommerce变量Product related JS，然后在以后通过ajax加载产品时运行它？如果忽略您正在使用的JS，则很难回答，但这并不是因为JS在页面加载之前运行，它听起来像onclick事件，可以通过h htmls
onclick=“jsfunction（）”
或者您可能需要修改事件绑定到元素的方式，例如jquerys onlick处理程序绑定一次，其中
on
也绑定新创建的元素。
$('.ajax').on('click', function(){
    show_products(); 
});

//Main ajax function
function show_products() {

    $.ajax({
        type: 'GET',
        url: product_show_ajax.ajax_url,
        data: {
            action: 'show_product',
        },
        beforeSend: function ()
        {
            //Eventually show a loader here
        },
        success: function(data)
        {
            //Eventually hide loader here
            $( '.product-container' ).html(data);;
        },
        error: function()
        {
            //If an ajax error has occured, do something here...
            $(".product-container").html('<p>There has been an error</p>');
        }
    });
}