onClick表行，其中包含onClick Button和Bootstrap Modal

Question

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

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

我找到了这个，但后来模态不起作用。 我发现了这个，但每次都有我的目标。

为什么它不起作用？ 我怎么能解决这个问题？

 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.StopPropagation方法并使用event.target捕获项ID，只获取删除项的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/

传递给您的点击处理程序的参数似乎有些奇怪。 根据文档 ，

传递给指定事件处理函数的单个参数是MouseEvent对象。 在处理程序中， this将是触发事件的元素。

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

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

 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来处理click事件，因为它将JavaScript与标记分开。 Element.onclick也可以正常工作，但我不建议使用HTML onclick属性，因为它使得传递参数更加棘手并将JavaScript直接放入HTML中（只要您没有使用促进执行的操作，代码分离效果不佳这就像React）。

Answer 3

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

function delete_clothing(btn) {

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

}