点击提交按钮触发

Question

I'm trying to trigger a short script click of the following submit button. It should add the "loading" css when the purchase button is clicked. The code will be loaded using Googletagmanager only on this page. The code I am currently attempting is:

<script>
 jQuery( document ).ready( function( $ ) {
$( '.form-row.place-order' ).click( function() {
$( this ).addClass( 'loading' );
});
});</script>

Here is the html

<div class="form-row place-order">
<input type="submit" class="button alt" 
name="woocommerce_checkout_place_order" id="place_order" value="Finalizar 
compra" data-value="Finalizar compra">
<input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input 
type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review">    
</div>    

I've also tried it with #place_order instead of .form-row.place-order however in both cases without sucess. Does anybody have an idea what I can? Thanks for your help. Best regards,

Answer 1

Your code works fine check it out. I think you should check your css class is doing what you mean to do.

 .loading input{ color : white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> jQuery( document ).ready( function( $ ) { $( '.form-row.place-order' ).click( function() { $( this ).addClass( 'loading' ); }); });</script> <div class="form-row place-order"> <input type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Finalizar compra" data-value="Finalizar compra"> <input type="hidden" id="_wpnonce" name="_wpnonce" value="6df1de1da5"><input type="hidden" name="_wp_http_referer" value="/?wc-ajax=update_order_review"> </div> 

Answer 2

I think you should wait for DOM, and just use normal javascript like below Or maybe your submit is too fast and does not show the animation?

<script>
jQuery( document ).ready( function( $ ) {

    $('#place_order').click(function(e) {
       $(this).addClass('loading');
    });

})();
</script>