Rails 数据 id 没有选择正确的 id

Question

我正在处理我的项目，我正在尝试通过模式删除一个项目。

基本上我有这个部分列表项代码：

<tr>
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr><tr>
  <td class="middle">
    <div class="media">
      <div class="media-left">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
            <%= image_tag contact.contact_avatar.attached? ? contact.contact_avatar : "100x100.png", class: "media-object img-thumbnail img-rounded mr-3" %>
        <% end %>
      </div>
      <div class="media-body mt-2">
        <%= link_to contact_path(contact), ":data-target" => "#show-contact-modal", ":data-toggle" => "modal", remote: true do %>
             <h4 class="media-heading"><%= contact.name %></h4>
        <% end %>
        <address>
          <strong><i class="fa fa-map-marker"></i> <%= contact.city %>, <%= contact.state %>, <%= contact.country %>, <%= contact.zip %> </strong><br>
          <i class="fa fa-envelope"></i> <%= contact.email %> | <i class="fa fa-mobile"></i> <%= contact.mobile %> | <i class="fa fa-phone"></i> <%= contact.phone %>
        </address>
      </div>
    </div>
  </td>
  <td class="middle" width="100">
    <div class="mt-5">
    <%= link_to edit_contact_path(contact), class: "btn btn-outline-secondary btn-circle btn-xs", ":data-target" => "#new-contact-modal", ":data-toggle" => "modal", remote: true do %>
          <i class="fa fa-edit"></i>
      <% end %>

      <div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>
    </div>
  </td>
</tr>

注意这段代码：

<div class="btn btn-outline-secondary btn-circle btn-xs delete-contact" data-id="<%= contact.id %>">
        <i class="fa fa-times"></i>
      </div>

如您所见，我正在尝试通过data-id 选择contact.id。然后在我的 jQuery - ajax 代码上，我试图将其拉出以删除它：

  //Open delete contact modal
  $(document).on('click', '.delete-contact', function(){
    $('#confirm-modal').modal('show');
    contact_id = $('.delete-contact').data('id');
  });

  //Send AJAX request to delete specific record when user confirms the action
  $(document).on('click', '.confirm-delete', function(){
    $.ajax({
      url: '/dashboard/contacts/' + contact_id,
      method: 'delete',
      data: {
        contact: contact_id
      },
      success: function (category) {
      },
      error: function (xhr) {
        let errors = xhr.responseJSON;
      }
    });
  });

但是，在尝试此操作时。它没有选择正确的contact.id，而是在它正在删除的 id 上添加 1 有时两个或三个甚至更多。

您是否在我的代码中看到任何错误，为什么它没有通过 data-id 选择正确的 ID？

Answer 1

  //init empty var 1st
   let contact_id;

  //Open delete contact modal
  $(document).on('click', '.delete-contact', function(){
    $('#confirm-modal').modal('show');
    contact_id = $(this).data('id');
  });