點擊提交按鈕觸發

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>