Question

我有一个付款方式页面，该页面允许用户删除卡或将卡设置为默认卡。今天我注意到，当我单击要删除的卡时，它实际上会删除另一张卡。我正在使用AJAX来处理表单，并且不确定将它们分开的最佳方法，因为它们是动态的，并且每个用户都有随机数的付款方式。

这是我的HTML / PHP的示例：

<table>
  <tr>
    <th>Method</th>
    <th>Expires</th>
    <th>Actions</th>
  </tr>
  <?php foreach($cards->data as $card) { ?>
    <tr>
      <td>Card Info</td>
      <td>Expiration</td>
      <td>
        <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="set-default">Set As Default</a>
          <a href="#" class="delete-card">Delete</a>
        </form>
      </td>
    </tr>
  <?php } ?>
</table>

这是我的AJAX函数：

// Delete Card
$('.delete-card').click(function() {
  $('.ajax-loading').show();
  var customer = $('input[name=sg_customer_id]').val();
  var card = $('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

在您的顶级处理程序中，引用this来引用单击的.delete-card <a>元素，然后可以引用其parent()来到达{{ 1}}您想要的：

<form>

$('.delete-card').click(function() {
  const $form = $(this).parent();
  const customer = $form.find('input[name=sg_customer_id]').val();
  const card = $form.find('input[name=sg_card_id]').val();
  console.log('Sending ajax request for ' + customer + ', ' + card);
});

同一页面上的AJAX表单的动态数量

1 个答案: