如何在单击的某些元素上忽略 Bootgrid 单击事件

Question

我已经实现了 JQuery bootgrid。我的问题是，当我的引导网格中的 select 输入被单击时，我想忽略行 click 事件。

这是我目前拥有的：

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

知道如何实现吗？我已经为此苦苦挣扎了很长时间。

编辑： 为什么 Alisson 的回答不起作用。

当我这样做时：

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

我可以获得 IncidentId，但是当我这样做时：

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

它不起作用，因为我无法通过这种方式访问 IncidentId。

这是我的 <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>

我想要这个：

不是这个：

Answer 1

编辑：更好的解决方案

您可以像您一样使用 click 事件，但结合 loaded 事件来停止传播您的 select input 事件，如下所示：

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

您需要在网格的 loaded 事件中绑定到 click，因为这是您确定 select 输入 等元素的地方存在于 DOM 中，并且由于在每次重新加载网格后（至少对于 ajax 调用），bootgrid 会删除所有元素并使用新数据重新创建，loaded会再次触发，所以这些新元素会再次绑定

Here is a working JSFiddle

旧解

不要使用此 click.rs.jquery.bootgrid 事件，而是绑定到 loaded，加载后，绑定到您需要的正确元素：

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

});

例如，如果您仍然需要向整行添加侦听器，并且希望避免在 button 或 input 中单击，您可以这样做（仍然在 loaded 事件中）：

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

如何在单击的某些元素上忽略 Bootgrid 单击事件

How to ignore Bootgrid click event on certain element clicked

javascript

jquery

row

onclick

jquery-bootgrid

编辑：更好的解决方案

旧解