从 data-href 功能中排除子节点

Question

我有一个 table，我在每一行上使用 data-href 属性，这样我就可以访问每一行的相应页面。在每一行的末尾，我都放置了一个 'edit' 和一个 'delete' 按钮。在我添加 sweet alert 2 确认模式之前，它们一直在正常工作。问题是当我点击删除按钮时，父 tr 节点的 data-href 被触发（连同删除功能）。如何从 tr data-href 功能中排除此按钮（甚至整个删除表单）？

tr节点：

<tr data-href="view_client/{{ $client->id}}">     
   <td><strong>{{$client->surname }}</strong></td>
   ...
   <td style="width:15%" >
        <div class="d-flex justify-content-evenly">
             <a href="/edit_client/{{ $client->id }}" class="btn btn-sm btn-warning flex-fill">
             <i class="far fa-edit"></i>Edit</a>
             <form action="/clients/{{ $client->id }}" id="deleteForm" method="POST">
             @method('DELETE')
             @csrf
                  <button type="button" class="btn btn-danger show_confirm"><i class="far fa-trash-alt"></i></button>
             </form>
        </div>
   </td>
</tr>

show_confirm的js:

$('.show_confirm').on('click', function(e) {
        var form =  $('#deleteForm');
        e.preventDefault();
        Swal.fire({
            title: "Delete Confirmation",
            text: "Are you sure?",
            icon: "warning",
            showCancelButton: true,
              confirmButtonColor: '#ff0f15',
              cancelButtonColor: '#ed032d9e9e9e',
              confirmButtonText: 'Yeah! Go ahead!'
        })
        .then((willDelete) => {
          if (willDelete.isConfirmed) {
            form.trigger('submit');
          }
        });
    });

Answer 1

您似乎需要防止对子元素的点击冒泡到父元素。这可以通过调用 event.stopPropagation() 进行解释来完成，请阅读此处的第二段：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
因此，在您的事件处理程序中只需添加调用：

    $('.show_confirm').on('click', function(e) {
        var form =  $('#deleteForm');
        e.preventDefault();
        e.stopPropagation(); // <---here
        Swal.fire({
            title: "Delete Confirmation",
            text: "Are you sure?",
            icon: "warning",
            showCancelButton: true,
              confirmButtonColor: '#ff0f15',
              cancelButtonColor: '#ed032d9e9e9e',
              confirmButtonText: 'Yeah! Go ahead!'
        })
        .then((willDelete) => {
          if (willDelete.isConfirmed) {
            form.trigger('submit');
          }
        });
    });

从 data-href 功能中排除子节点

Exclude child node from data-href functionality

html

href

bootstrap-5