Script funktioniert nicht in woocommerce "Bestellung aufgeben" Abschnitt

Question

Ich legte benutzerdefinierte Schaltfläche in der Reihenfolge, in der Datei review-order.php. Ich möchte ein Skript ausführen, das beim Klicken auf die Schaltfläche Aktionen ausführt, aber das Skript in diesem Bereich funktioniert nicht. Und auch die Schaltfläche wird zweimal ausgeführt, sobald die Seite geladen ist, und einmal nach dem Ajax fertig zu laden. In jedem anderen Teil der Seite funktioniert das Skript.

Der Code, wo ich den Knopf setzen:

<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> 

Die js-Datei:

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'); 

    }); 

}); 

I enqueue diese Datei in 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()); 
    } 
} 

Wer weiß, was los ist?

Answer 1

Wie Sergeon vorgeschlagen hat, können Sie .on verwenden.

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

Wenn das nicht funktioniert, dann können Sie ein wenig höher als .shop_table bis die Kette „Blase“ brauchen, und ich würde den nächsten am nächsten Container div versuchen.