onClick table 行，其中包含 onClick 按钮和 Bootstrap 模态框

Question

我想打开生成的 link，如果用户单击 table 行。在这一行中，我有一个删除按钮。如果单击删除按钮，我想打开模式。

每次我点击删除按钮时，table 行也会被点击。

我找到了 this，但是模式不起作用。我发现 this 但每次都有我的目标 Null.

为什么不起作用？我该如何解决这个问题？

function show_clothing(t_row) {

  var link = $(t_row).attr('data-href');
  console.log("Redirect to : " + link);

}

function delete_clothing(btn) {

  var clothing_id = $(btn).attr('data-clothing_id');
  console.log("Delete : " + clothing_id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="show_clothing(this)" data-href="a_link">
      <td>#34</td>
      <td>
        <button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34" onclick="delete_clothing(this)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>

Answer 1

这将只为您提供删除项目的 ID，使用 event.StopPropagation 方法并使用 event.target 捕获项目 ID

function show_clothing(t_row) {

  var link = $(t_row).attr('data-href');
  console.log("Redirect to : " + link);

}

function delete_clothing(e) {
 e.stopPropagation()
  var clothing_id = $(e.target).attr('data-clothing_id');
  console.log("Delete : " + clothing_id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr onclick="show_clothing(this)" data-href="a_link">
      <td>#34</td>
      <td>
        <button data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34" onclick="delete_clothing(event)">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>

Answer 2

要解决此特定问题，您可以使用 event.stopPropagation 阻止事件到达父级：

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation https://api.jquery.com/event.stoppropagation/

传递给您的点击处理程序的参数似乎发生了一些奇怪的事情。根据 documentation、

The single argument passed to the specified event handler function is a MouseEvent object. Within the handler, this will be the element upon which the event was triggered.

这使您可以访问要停止冒泡的元素和事件。

这是一个片段，其中单击删除按钮只会触发删除处理程序：

function show_clothing(ev) {
  var link = $(this).attr('data-href');
  console.log("Redirect to : " + link);
}

function delete_clothing(ev) {
  var clothing_id = $(this).attr('data-clothing_id');
  ev.stopPropagation();
  console.log("Delete : " + clothing_id);
}

$('#deleteClothing').click(delete_clothing);
$('#showClothing').click(show_clothing);

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<table class="table table-light">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Button</th>
    </tr>
  </thead>
  <tbody>
    <tr id="showClothing" data-href="a_link">
      <td>#34</td>
      <td>
        <button id="deleteClothing" data-toggle="modal" data-target="#deleteModalCenter" class="btn btn-danger btn-sm" data-clothing_id="34">Delete</button>
      </td>
    </tr>
  </tbody>
</table>




<div class="modal fade" id="deleteModalCenter" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Delete clothing</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p id="modal_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
          <p id="modal_text_small">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam </p>
      </div>
      <div class="modal-footer">
         <a><button type="button" class="btn btn-secondary" data-dismiss="modal">chancel</button></a>
        <a id="delete_btn" href="/delete_person/"><button type="button" class="btn btn-danger">delete</button></a>
      </div>
    </div>
  </div>
</div>

我使用 jQuery 来处理点击事件，因为它将 JavaScript 与标记分开。 Element.onclick would work just as well but I don't recommend using the HTML onclick attribute 因为它使传递参数变得更加棘手并将 JavaScript 直接放在 HTML 中（代码分离不佳，只要您不使用像 React 这样促进这样做的东西）。

Answer 3

event.cancleBuble=true 和其他人在单击您的按钮时停止关注事件。这意味着如果你想在点击按钮后阻止点击行，你必须使用它。您应该在取消气泡后立即从 javascript 添加模态的初始打开。

function delete_clothing(btn) {

var clothing_id = $(btn).attr('data-clothing_id');
console.log("Delete : " + clothing_id);
event.cancelBubble=true;
$("#deleteModalCenter").modal('show');

}

onClick table 行，其中包含 onClick 按钮和 Bootstrap 模态框

onClick table row with onClick Button and Bootstrap Modal inside

html

javascript

jquery

bootstrap-modal

jquery-events