Question

因此，我有一个删除付款方式的ajax表单处理程序。当用户单击“删除”时，将显示一个确认弹出窗口。但是，即使用户单击“取消”，它仍会运行该表格并删除付款方式。我需要更改什么？

HTML：

<form class="sg-inline-form" method="post" action="">
  <input type="hidden" name="sg_customer_id" value="customerID">
  <input type="hidden" name="sg_card_id" value="cardID">
  <a href="#" class="delete-card" onclick="return confirm('Are you sure?')">Delete</a>
</form>

AJAX：

$('.delete-card').click(function() {
    $('.ajax-loading').show();
    const $form = $(this).parent();
    const customer = $form.find('input[name=sg_customer_id]').val();
    const card = $form.find('input[name=sg_card_id]').val();
    $.ajax({
        url: sg_obj.ajaxurl,
        data: {
            'action': 'sg_delete_payment_source',
            'customer' : customer,
            'card' : card
        },
        success:function(data) {
            // This outputs the result of the ajax request
          $('.ajax-loading').hide();
          $('#ajax-messages').addClass('alert alert-success').html('The payment source has been deleted. <a href=".">Refresh Page</a>');
        },
        error: function(errorThrown){
          $('.ajax-loading').hide();
          $('#ajax-messages').addClass('alert alert-danger').html('An error occurred.');
        }
    });  
    });

Answer 1

请勿创建两个单独的onClick绑定。您可以通过更改代码来实现功能

HTML：

<form class="sg-inline-form" method="post" action="">
  <input type="hidden" name="sg_customer_id" value="customerID">
  <input type="hidden" name="sg_card_id" value="cardID">
  <a href="#" class="delete-card">Delete</a>
</form>

AJAX：

$('.delete-card').click(function() {
    if(confirm('Are you sure?')) {
        $('.ajax-loading').show();
        const $form = $(this).parent();
        const customer = $form.find('input[name=sg_customer_id]').val();
        const card = $form.find('input[name=sg_card_id]').val();
        $.ajax({
            url: sg_obj.ajaxurl,
            data: {
                'action': 'sg_delete_payment_source',
                'customer' : customer,
                'card' : card
            },
            success:function(data) {
                // This outputs the result of the ajax request
              $('.ajax-loading').hide();
              $('#ajax-messages').addClass('alert alert-success').html('The payment source has been deleted. <a href=".">Refresh Page</a>');
            },
            error: function(errorThrown){
              $('.ajax-loading').hide();
              $('#ajax-messages').addClass('alert alert-danger').html('An error occurred.');
            }
        });
    }
});

Answer 2

这是因为您正在使用监听onclick和.click事件。您可以在用户是否单击“取消”时停止输入确认。

$(function(){
  $("#continues").click(
    function(){
      alert("FIRES EITHER WAY");
  });
  
  $("#stops").click(function(){
    if(confirm("TEST")){
      alert("CONTINUED");
    } else {
      alert("STOPED");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="continues" href="#" onclick="return confirm('Continues')">Continues</a>
<a id="stops" href="#">Stops</a>

Answer 3

您没有条件可以测试confirm（）的实际含义。 this link展示了如何获取实际的confirm()响应，您应该在提交$.ajax请求之前测试响应是对还是错。

Javascript确认，即使取消也可以运行表格

3 个答案: