我在表格標簽中有 onclick 方法。我的標簽中也有它。我只是想在按下洗掉按鈕時取消點擊方法。
@foreach (var item in Model.PickupTemplate.PickupBags.OrderByDescending(x => x.Id))
{
<tr id="[email protected]" onclick="RedirectToBagDetailsPage(@item.Id)" style="cursor:pointer;" class="bagList">
<td>@item.BagName - @item.BagOrderId</td>
<td>@item.TotalBillOfLadingWeightPhysical</td>
<td>@item.TotalBillOfLadingWeight</td>
<td>@item.TotalBillOfLadingCount</td>
<td><a onclick="DeletePickupBag(@item.Id)"><i class="fa fa-trash fa-2x"></i></a></td>
</tr>
}
我如何使用 jquery 或 javascript 來做到這一點？
uj5u.com熱心網友回復：
您需要阻止a元素上的內部單擊事件將 DOM 傳播到 DOM 以便tr它也被捕獲。
為此，也為了提高代碼質量，請使用在 JS 代碼中分配的不顯眼的事件處理程式，而不是在您的 HTML 中。從那里您可以將事件作為事件處理程式的引數訪問并呼叫stopPropagation()它。
當您使用 jQuery 標記問題時，以下是如何執行此操作：
$('.bagList').on('click', e => {
let itemId = $(e.currentTarget).data('item-id');
// redirect logic here...
console.log('Redirect', itemId);
});
$('.bagList a').on('click', e => {
e.stopPropagation();
e.preventDefault();
let itemId = $(e.target).closest('.bagList').data('item-id');
// delete logic here...
console.log('Delete', itemId);
});
.bagList {
cursor: pointer;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
@foreach (var item in Model.PickupTemplate.PickupBags.OrderByDescending(x => x.Id))
{
<tr id="[email protected]" data-item-id="@item.Id" class="bagList">
<td>@item.BagName - @item.BagOrderId</td>
<td>@item.TotalBillOfLadingWeightPhysical</td>
<td>@item.TotalBillOfLadingWeight</td>
<td>@item.TotalBillOfLadingCount</td>
<td><a href="#"><i class="fa fa-trash fa-2x"></i>Delete</a></td>
</tr>
}
</table>這是普通 JS 中的相同邏輯：
document.querySelectorAll('.bagList').forEach(bagList => {
bagList.addEventListener('click', e => {
let itemId = e.currentTarget.dataset['item-id'];
// redirect logic here...
console.log('Redirect', itemId);
})
});
document.querySelectorAll('.bagList a').foreach(a => {
a.addEventListener('click', e => {
e.stopPropagation();
e.preventDefault();
let itemId = $(e.target).closest('.bagList').data('item-id');
// delete logic here...
console.log('Delete', itemId);
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478990.html
標籤：javascript html jQuery