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

使用Blade 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'); 
});

Answer 2

你可以像贬低DEMO那样做，希望它会对你有所帮助。

＆＃13;

$(".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)
            })

＆＃13;

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

＆＃13;

Answer 3

面临的问题是由于事件冒泡。您可以将点击处理程序更新为以下

   $('tr[data-href]').on("click", function() {
        if(!$(event.target).is(":button")) {
            document.location = $(this).data('href');
        }
    });

jQuery链接除了按钮打开Bootstrap Modal

3 个答案: