我已经实现了一个 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>
我想要这个:
不是这个:
最佳答案
编辑:更好的解决方案
您可以像您一样使用 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)。
旧解
不要使用此 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();
});
关于javascript - 如何在单击的某些元素上忽略 Bootgrid 单击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44111274/