javascript - onClick 表行，其中包含 onClick 按钮和 Bootstrap Modal

Question

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

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

我找到了 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

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

function delete_clothing(btn) {

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

}