脚本在 woocommerce“下订单”部分不起作用

Posted 2023-02-22

【中文标题】脚本在 woocommerce“下订单”部分不起作用

【英文标题】：Script don't work in woocommerce "place order" section

【发布时间】：2016-12-13 00:55:22

【问题描述】：

我将自定义按钮放在文件review-order.php 的下单部分。 我想运行一个脚本，在单击按钮时使事情发生，但是该区域中的脚本不起作用。 而且该按钮运行两次，一次是在页面加载时，一次是在 ajax 完成加载后。 在页面的任何其他部分，脚本都可以工作。

我放置按钮的代码：

<table class="shop_table woocommerce-checkout-review-order-table">
    <tfoot>
    <?php foreach ( WC()->cart->get_coupons() as $code => $coupon ) : ?>
        <tr class="cart-discount coupon-<?php echo esc_attr( sanitize_title( $code ) ); ?>">
            <th><?php wc_cart_totals_coupon_label( $coupon ); ?></th>
            <td><?php wc_cart_totals_coupon_html( $coupon ); ?></td>
        </tr>
    <?php endforeach; ?>

    <?php if ( WC()->cart->needs_shipping() && WC()->cart->show_shipping() ) : ?>

        <?php do_action( 'woocommerce_review_order_before_shipping' ); ?>

        <?php wc_cart_totals_shipping_html(); ?>

        <?php do_action( 'woocommerce_review_order_after_shipping' ); ?>

    <?php endif; ?>

    <?php foreach ( WC()->cart->get_fees() as $fee ) : ?>
        <tr class="fee">
            <th><?php echo esc_html( $fee->name ); ?></th>
            <td><?php wc_cart_totals_fee_html( $fee ); ?></td>
        </tr>
    <?php endforeach; ?>

    <?php if ( wc_tax_enabled() && 'excl' === WC()->cart->tax_display_cart ) : ?>
        <?php if ( 'itemized' === get_option( 'woocommerce_tax_total_display' ) ) : ?>
            <?php foreach ( WC()->cart->get_tax_totals() as $code => $tax ) : ?>
                <tr class="tax-rate tax-rate-<?php echo sanitize_title( $code ); ?>">
                    <th><?php echo esc_html( $tax->label ); ?></th>
                    <td><?php echo wp_kses_post( $tax->formatted_amount ); ?></td>
                </tr>
            <?php endforeach; ?>
        <?php else : ?>
            <tr class="tax-total">
                <th><?php echo esc_html( WC()->countries->tax_or_vat() ); ?></th>
                <td><?php wc_cart_totals_taxes_total_html(); ?></td>
            </tr>
        <?php endif; ?>
    <?php endif; ?>

    <?php do_action( 'woocommerce_review_order_before_order_total' ); ?>

    <tr class="order-total">
        <th><?php _e( 'Total', 'woocommerce' ); ?></th>
        <td><?php wc_cart_totals_order_total_html(); ?></td>
    </tr>

    <?php do_action( 'woocommerce_review_order_after_order_total' ); ?>

    <a id="test-btn">test</a>

    </tfoot>
</table>

js文件：

jQuery(document).ready(function($)

    $('#shipping_method input').change(function()
        if($('#shipping_method_0_local_pickup5').is(':checked'))
            $('#billing_address_1_field, #billing_address_2_field, #billing_address_3_field, #billing_city_field, #billing_note_field').addClass('hide');
        
    );
    $('#test-btn').click(function()
        alert('test');

    );

);

我将此文件排入functions.php：

add_action( 'wp_enqueue_scripts', 'sukot_wp_enqueue_scripts' );
function sukot_wp_enqueue_scripts()

    if( is_checkout() ) 
        wp_enqueue_script('checkout', get_template_directory_uri() . '/checkout.js', array('jquery'), time() );
    

有人知道怎么回事吗？

【问题讨论】：

所以你的问题是警报（'test'）代码没有触发？我不习惯 woocommerce，但如果某个 woocommerce 模块正在从AJAX - 从你在 Q 开始时所说的话看来就是这种情况-

结帐现在是通过ajax加载的，所以#test-btn可能不在页面加载的dom中。

@helgatheviking 那么我该如何克服呢？

【参考方案1】：

按照 Sergeon 的建议，您可以使用 .on。

$( ".shop_table" ).on( "click", "#test-btn", function() 
  alert("clicked");
);

如果这不起作用，那么您可能需要将链“冒泡”比.shop_table 高一点，我会尝试下一个最近的容器div。