jQuery< tr>链接，除了打开Bootstrap Modal的按钮 [英] jQuery <tr> link except button which opens Bootstrap Modal
本文介绍了jQuery< tr>链接，除了打开Bootstrap Modal的按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我想使我的<tr>'s可点击/链接到相应的页面.所有行都有一个删除行的按钮.不幸的是，当用户单击删除按钮时，在单击该行时它仍然链接.我添加了代码，因此除了单击按钮外，它将执行此操作.因此，它可以打开bootstrap modal进行删除确认.
So I wanted to make my <tr>'s clickable / linked to a corresponding page. All rows have a button to delete the row aswell. Unfortunately when an user Clicks on the delete button it still links as the row is clicked. I added code so it would do that except button click.. so it could open the bootstrap modal for delete confirmation.
我的脚本:
$('tr[data-href]:not(:button)').on("click", function() {
document.location = $(this).data('href');
});
$('tr button[data-target]').on("click", function() {
document.location = $(this).data('target');
});
带有Blade foreach的HTML表
HTML table with Blade foreach
<tr style="cursor:pointer;!important;" data-href="/bugs/{{$project->id}}">
<td>{{$project->created_at->format('d-m-Y')}}</td>
<td>{{$project->projectnaam}}</td>
<td>{{$project->liveurl}}</td>
<td>{{$project->developmenturl}}</td>
<td>{{$project->user->voornaam .' '. $project->user->tussenvoegsel .' '. $project->user->achternaam }}</td>
<td>{!! substr($project->omschrijvingproject,0,90) !!}</td>
<td class="text-right" >
<a href="/projectmuteren/{{$project->id}}" class="">
<button class="btn btn-success btn-xs wijzigKnop2" name="zoekProject" type="button" data-project="{{$project->projectnaam}}">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</a>
<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal{{$project->id}}">
<i class="glyphicon glyphicon-trash"></i>
</button>
</td>
</tr>
删除模态
<div class="modal fade" id="myModal{{$proj->id}}" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Verwijder verzoek</h4>
</div>
<div class="modal-body">
<p>Weet u zeker dat u het project : <strong>{{$proj->titel}}</strong> met alle gekoppelde data wilt verwijderen…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-xs pull-right" data-dismiss="modal">Sluit</button>
<form method="POST" action="/verwijderProject/{{$proj->id}}" >
{!! method_field('DELETE') !!}
{!! csrf_field() !!}
<button type="submit" class="btn btn-danger btn-xs pull-left">
{{--<i class="glyphicon glyphicon-trash"></i>--}}
Verwijder project
</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
请回答有关如何排除按钮单击的任何解决方案.
Please reply with any solution on how to exclude the button click..
推荐答案
您可以像在下面的演示版中那样进行操作，希望对您有所帮助.
You can do it as in bellow DEMO, hope it will help you a bit.
$(".table").on("click", function (event) {
var nodeName = event.target.nodeName;
// alert(nodeName + " Node Clicked");
debugger
if(nodeName == "BUTTON"){
alert($(event.target).data("btnid") + " is the btn id")
//Do rest things
}
if (nodeName == "TD") {
alert($(event.target).closest("tr").data("href") + " is the href of row")
//DO rest things on row clicked
}
});
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var btnID = button.data('btnid') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body input#btnClickedID').val(btnID)
})
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<tbody>
<tr data-href="tr -href- 1">
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td><button class="btn" data-toggle="modal" data-target="#myModal" data-btnid="btn 1">Delete</button></td>
</tr>
<tr data-href="tr -href- 2">
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
<td><button class="btn" data-toggle="modal" data-target="#myModal" data-btnid="btn 2">Delete</button></td>
</tr>
<tr data-href="tr -href- 3">
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
<td><button class="btn" data-toggle="modal" data-target="#myModal" data-btnid="btn 3">Delete</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<input type="text" id="btnClickedID"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try it Your
</div>
这篇关于jQuery< tr>链接，除了打开Bootstrap Modal的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
