Question

我将自定义按钮放在文件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() );
    }
}

任何人都知道发生了什么事？

Answer 1

正如Sergeon建议的那样，你可以使用.on。

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

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

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

1 个答案: