我有一個標簽，里面有很棒的字體。有時當我使用字體真棒圖示時它不起作用，需要嘗試 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>
uj5u.com熱心網友回復：
您需要找到通往容器元素的方法
在 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 來獲取事件處理程式分配給的元素
$(".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>uj5u.com熱心網友回復：
您可以使用 currentTarget來獲取事件系結到的元素。
const id = e.currentTarget.dataset.id; // should be const because you don't reassign it.
uj5u.com熱心網友回復：
我不喜歡你在錨點中有一個表單的方式——如果你在表單中呈現了輸入，那么你的 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，您的表單也可以作業（無需確認）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457373.html