jQuery <tr>链接除了打开Bootstrap Modal的按钮

Question

所以我想让我的<tr>'s可点击/链接到相应的页面.所有行都有一个按钮来删除行.不幸的是,当用户单击删除按钮时,它仍会在单击行时链接.我添加了代码,所以除了点击按钮之外它会这样做.所以它可以打开bootstrap modal删除确认.

我的剧本:

$('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');
});

带有刀片foreach的HTML表格

                                  <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">&times;</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&hellip;</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 -->

请回复任何关于如何排除按钮点击的解决方案..

Answer 1

您可以使用以下方式阻止父点击事件e.stopPropagation().

$('tr button[data-target]').on("click", function(e) {
    e.stopPropagation();
    document.location = $(this).data('target'); 
});