jQuery link except button which opens Bootstrap Modal

Question

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.

My script :

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

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>

Delete modal

<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 -->

Please reply with any solution on how to exclude the button click..

Answer 1

You can prevent parent click event like below using e.stopPropagation().

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

Answer 2

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">&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>

Answer 3

The problem faced is due to event bubbling. You can update your click handler to following

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