点击提交按钮触发

Question

我试图触发以下提交按钮的短脚本单击。 单击购买按钮时，它应添加“正在加载” css。 仅在此页面上使用Googletagmanager加载代码。 我目前正在尝试的代码是：

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

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

我也用#place_order而不是.form-row.place-order尝试过，但是在两种情况下都没有成功。 有人知道我能做什么吗？ 谢谢你的帮助。 最好的祝福，

Answer 1

您的代码可以正常运行。 我认为您应该检查您的css类是否在做您想做的事情。

 .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

我认为您应该等待DOM，然后像下面那样使用普通的javascript，或者您的提交速度太快，并且不显示动画？

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

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

})();
</script>