How to ignore Bootgrid click event on certain element clicked

Question

I have implemented a JQuery bootgrid. My problem is that I want to ignore the row click event for when a select input in my bootgrid is clicked.

This is what I have so far:

.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {;
    if(/* Clicked element is not a select input */) {
        location.href = "/row?id=" + row.Id;
    }
});

Any idea how to accomplish this? I've been struggling around with this for ages now.

Edit: Why Alisson's answer doesn't work.

When I do this:

.on("click.rs.jquery.bootgrid", function (e, column, row, target) {
    console.log(row.IncidentId);
});

I can get the IncidentId, but when I do this:

.on("loaded.rs.jquery.bootgrid", function () {
    grid.find(".some-selector").on("click", function (e) {
        // do what you need here...
        var IncidentId = $(this).closest('tr').data('IncidentId');
        location.href = "/row?id=" + IncidentId;
    });
});

It doesn't work because I can't access the IncidentId that way.

This is my <thead>:

<thead>
    <tr>
        @*<th data-column-id="IncidentId" data-visible="false">Id</th>*@
        <th data-column-id="CaseNumber" data-order="asc">Case Number</th>
        <th data-column-id="Title">Case Title</th>
        <th data-column-id="EntrepreneurContact">Entrepreneur Contact</th>
        <th data-column-id="Mentor">Mentor</th>
        <th data-column-id="StatusReason">Status Reason</th>
        <th data-column-id="CreatedOn">Created On</th>
    </tr>
 </thead>

I want this:

Not this:

Answer 1

Edit: a better solution

You can use the click event as you would, but combining with the loaded event to stop the propagation of your select input events like so:

var bootgrid = $("#grid1").bootgrid(config);

bootgrid.on("click.rs.jquery.bootgrid", function (e, columns, row, target) {
    console.log('Incident Id: ' + row.IncidentId);
});

bootgrid.on("loaded.rs.jquery.bootgrid", function (e, c, rows) {
    // avoid any element with "stop-click-event" class from triggering the event in the grid...
    $(".stop-click-event").click(function(e) {
        e.preventDefault();
        e.stopPropagation();
    });
});

You need to bind to click inside the loaded event of the grid, because this is where you are sure the elements like your select input already exist in the DOM, and since after each reload of the grid (at least for ajax calls) the bootgrid delete all your elements and recreate with new data, loaded will be triggered again, so these new elements will be bound again.

Here is a working JSFiddle

---

Old solution

Instead of using this click.rs.jquery.bootgrid event, bind to loaded, and once loaded, bind to the correct elements you need:

var grid = $("#my-grid").bootgrid(config)
.on("loaded.rs.jquery.bootgrid", function () {

    // find elements inside the grid, using some jQuery selector...
    grid.find(".some-selector").on("click", function (e) {
        // do what you need here...
        var rowId = $(this).closest('tr').data('row-id');
        location.href = "/row?id=" + rowId;
    });

});

---

If you still need to add a listener to an entire row, for example, and want to avoid a click in a button or an input, you can do something like this (still inside loaded event):

// bind to all rows inside the grid...
grid.find("tr").mouseup(function (e) {
    // do something
    var rowId = $(this).data('row-id');
    location.href = "/row?id=" + rowId;
});

// avoid when clicking any "a", "input" or "button" tags...
grid.find("tr td a, tr td input, tr td button").mouseup(function (e) {
    e.stopPropagation();
});