Click event not working when using font awesome inside A Tag-CodePudding

I have A tag which have font awesome inside it. Sometimes it doesnt work when I use the font awesome icon, and need to try this until 3 or 4 times to make it works. What should I do?

$(".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 }}" >
   <form action="{{ route('position.delete', ['congregationId' => $servant->id]) }}" method="post"  id="delete{{ $servant->id }}">
      @csrf
      @method('delete')
   </form>
   <i ></i>
</a>

CodePudding user response：

You need to address your way to the container element

In jQuery use $(this)

but I do not like the form inside your link

$(".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" >
  <form action="" method="post"  id="deleteX">
  </form>Something else 
  <i >X</i>
</a>

In plain JS use currentTarget to get the element the eventhandler is assigned to

$(".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" >
  <form action="" method="post"  id="deleteX">
  </form>Something else
  <i >X</i>
</a>

CodePudding user response：

You can use currentTarget to get the element the event was bound to.

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

CodePudding user response：

I don't like the way you have a form inside your anchor - if you have inputs being rendered inside the form, then your html will be invalid and can cause some issues with how the browser renders it

Instead of having an anchor that you tie your event to, why not just use a button inside your form and if the result is not confirmed, prevent the default action:

Change html:

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

And prevent the default action of the button if the result is not confirmed:

$(".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
    }
  })
});

By doing it this way it is more accessible too as your form will work (without the confirmation) even if javascript is disabled