Question

我试图触发以下提交按钮的短脚本点击。它应该添加＆＃34; loading＆＃34;单击购买按钮时的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课正在做你想做的事。

＆＃13;

.loading input{
  color : white;
}

＆＃13;

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

＆＃13;

Answer 2

我认为你应该等待DOM，并且只需使用下面的普通javascript 或者你的提交速度太快而且没有显示动画？

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

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

})();
</script>

单击提交按钮触发

2 个答案: