Tengo el método onclick en la etiqueta de la tabla. También lo tengo en mi etiqueta. Solo estoy tratando de cancelar el método de clic cuando se presiona el botón Eliminar.
@foreach (var item in Model.PickupTemplate.PickupBags.OrderByDescending(x => x.Id)) { <tr id="pickupBagRow-@item.Id" 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> }¿Cómo puedo hacerlo usando jquery o javascript?
Debe evitar que el evento de clic interno en el elemento a se propague por el DOM al tr para que también se atrape allí.
Para hacer esto, y también para mejorar la calidad de su código, use controladores de eventos discretos que se asignan en el código JS, no en su HTML. Desde allí, puede acceder al evento como un argumento para el controlador de eventos y llamar a stopPropagation() en él.
Como ha etiquetado la pregunta con jQuery, así es como se hace:
$('.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="pickupBagRow-@item.Id" 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>Aquí está la misma lógica en JS simple:
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); }); });