在使用标签内使用字体时，单击事件不起作用

Question

我有一个标签，里面有很棒的字体。有时，当我使用 font Awesome 图标时，它不起作用，需要尝试 3 或 4 次才能起作用。我应该怎么办？

$(".confirm-delete").click(function(e) {
  e.preventDefault();
  let id = e.target.dataset.id;
  Swal.fire({
    title: 'Perhatian!',
    text: "Apakah Anda yakin untuk menghapus pengisi jabatan ini?",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Ya, hapus',
    cancelButtonText: 'Tidak'
  }).then((result) => {
    if (result.isConfirmed) {
      $(`#delete${id}`).submit();
    }
  })
});

<a href="#" data-id="{{ $servant->id }}" class="btn btn-danger btn-sm confirm-delete">
   <form action="{{ route('position.delete', ['congregationId' => $servant->id]) }}" method="post" class="d-inline" id="delete{{ $servant->id }}">
      @csrf
      @method('delete')
   </form>
   <i class="fas fa-trash"></i>
</a>

Answer 1

容器元素的方式

您需要解决jQuery中的

使用$（this） ，但我不喜欢链接中的表格

$(".confirm-delete").on("click", function(e) {
  e.preventDefault();
  console.log($(this).data("id"));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="ID" class="btn btn-danger btn-sm confirm-delete">
  <form action="" method="post" class="d-inline" id="deleteX">
  </form>Something else 
  <i class="fas fa-trash">X</i>
</a>

在普通JS中，使用CurrentTarget来获取EventHandler分配给的元素

$(".confirm-delete").on("click", function(e) {
  const tgt = e.target; // A or I depending. I if you click I
  const link = tgt.closest("a"); // Always A if clicking inside the link
  const curr = e.currentTarget; // The A since that is where we have the .on
  const id = e.currentTarget.dataset.id; // the ID from the link
  e.preventDefault();
  console.log(tgt.tagName, link.tagName, curr.tagName, id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" data-id="ID" class="btn btn-danger btn-sm confirm-delete">
  <form action="" method="post" class="d-inline" id="deleteX">
  </form>Something else
  <i class="fas fa-trash">X</i>
</a>

Answer 2

您可以使用CurrentTarget被束缚。

const id = e.currentTarget.dataset.id; // should be const because you don't reassign it.

Answer 3

我不喜欢锚点内有一个表单的方式 - 如果您在表单内呈现输入，那么您的 html 将无效，并且可能会导致浏览器呈现它的方式出现一些问题

而不是有一个绑定的锚点您的事件，为什么不在表单中使用按钮，如果结果未确认，则阻止默认操作：

更改 html：

<form action="{{ route('position.delete', ['congregationId' => $servant->id]) }}" method="post" class="d-inline" id="delete{{ $servant->id }}">
  @csrf @method('delete')
  <button class="confirm-delete"><i class="fas fa-trash"></i></button>
</form>

如果结果未确认，则阻止按钮的默认操作：

$(".confirm-delete").click(function(e) {
  Swal.fire({
    title: 'Perhatian!',
    text: "Apakah Anda yakin untuk menghapus pengisi jabatan ini?",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Ya, hapus',
    cancelButtonText: 'Tidak'
  }).then((result) => {
    if (!result.isConfirmed) {
      e.preventDefault();  // prevent default action if not confirmed
    }
  })
});

通过这样做也更容易访问，因为您的表格将起作用（无需确认）即使 JavaScript 被禁用