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

Question

我已经实现了一个 JQuery bootgrid。我的问题是我想忽略行 click select 时的事件单击我的 bootgrid 中的输入。

这是我目前所拥有的:

.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 事件中绑定(bind)到 click，因为这是您确定像您的选择输入这样的元素已经存在的地方DOM，并且由于每次重新加载网格后(至少对于 ajax 调用)，bootgrid 会删除所有元素并使用新数据重新创建，loaded 将再次触发，因此这些新的元素将再次绑定(bind)。

Here is a working JSFiddle

---

旧解

不要使用此 click.rs.jquery.bootgrid 事件，而是绑定(bind)到 loaded，一旦加载，绑定(bind)到您需要的正确元素:

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