Jquery nested click function abort child if container is triggered

user_17665874 0
Viewed 58

I have onclick method in table tag.I also have it in my tag. I'm just trying to cancel the click method on when the delete button in is pressed.

  @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>
                            }

How can i do it using jquery or javascript?

html jquery javascript
1 Answers

You need to stop the inner click event on the a element from propagating up the DOM to the tr for it to be caught there too.

To do this, and also to improve the quality of your code, use unobtrusive event handlers which are assigned in JS code, not in your HTML. From there you can access the event as an argument to the event handler and call stopPropagation() on it.

As you've tagged the question with jQuery, here's how to do it:

$('.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>

Here's the same logic in plain 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);
  });
});
user_5194130
Related