javascript - 按钮点击警报未触发

Question

我需要在 WooCommerce 下订单按钮上发出警报。 当我将带有 id 'place_order' 的代码放在下面时，它不起作用。但是，当我用任何其他元素 ID 更改此 ID 并单击那里时，它会起作用!

当我单击以下按钮时，我需要此警报才能工作:

jQuery(document).ready(function($) {

  $(function() {
    $('#place_order').click(function() {
      alert("This is a test message... please ignore this.");
    });
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Pay securely with WorldPay</button>

你能告诉我我错过了什么吗？是不是因为按钮调用了ajax？如果是，我怎样才能完成这项工作？

谢谢

Answer 1

这是链接按钮或普通按钮的处理方式:

$(document).ready(function(){
    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});

但是您使用的是提交按钮，所以表单已提交，您看不到消息。 这是一种在需要时停止提交表单的方法:

$(document).ready(function(){
    $('form').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented/stopped.");
    });

    $('#place_order').click(function() {
        alert("This is a test message... please ignore this.");
    });
});

希望对你有帮助