Динамическое количество форм AJAX на одной странице

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(), чтобы получить желаемый <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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Method</th>
    <th>Expires</th>
    <th>Actions</th>
  </tr>
  <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="customerID1">
        <input type="hidden" name="sg_card_id" value="cardID1">
        <a href="#" class="set-default">Set As Default</a>
        <a href="#" class="delete-card">Delete</a>
      </form>
    </td>
  </tr>
    <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="customerID2">
        <input type="hidden" name="sg_card_id" value="cardID2">
        <a href="#" class="set-default">Set As Default</a>
        <a href="#" class="delete-card">Delete</a>
      </form>
    </td>
  </tr>
</table>