函数不是第一次触发
Function not firing first time around
我正在使用 Kendo 控件(特别是 Grid
和 Drop Down Lists
)。
由于 Kendo 网格组件上没有用于双击事件的内置处理程序,我编写了一些 JQuery 代码来解决这个问题。
通过检查浏览器控制台,我可以看到触发了双击事件以及从网格中提取相关数据项。
问题在于从双击函数中调用的 applySelections
。我想根据行 selected 上的数据从六个 Kendo 下拉列表中预 select 值。在此之后,我在每个下拉列表上触发 change
事件以应用相关过滤器。
$(document).ready(function () {
var grid = $("#grid").data("kendoGrid");
grid.tbody.on("dblclick", "tr", function (e) {
var test = grid.dataItem(this);
applySelections(grid.dataItem(this));
});
function applySelections(item) {
$('#ddl1').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[0].ID;
});
$('#ddl2').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[1].ID;
});
$('#ddl3').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[2].ID;
});
$('#ddl4').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[3].ID;
});
$('#ddl5').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[4].ID;
});
$('#ddl6').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[5].ID;
});
$("#ddl1").data("kendoDropDownList").trigger("change");
$("#ddl2").data("kendoDropDownList").trigger("change");
$("#ddl3").data("kendoDropDownList").trigger("change");
$("#ddl4").data("kendoDropDownList").trigger("change");
$("#ddl5").data("kendoDropDownList").trigger("change");
$("#ddl6").data("kendoDropDownList").trigger("change");
}
}
在第一次双击时,我跟踪了代码,可以看到正在执行的初始双击功能。但是,正在触发 applySelections
函数中的 select
个事件中的 none 个。下一次,对每个下拉菜单执行相同的代码,并观察到预期的结果。
经过进一步检查,结果证明解决方案相对简单(而且显而易见)。下拉控件 autoBind
值设置为 false
,这意味着我的 select
事件与 select
无关。
变化中:
var ddl1 = $("#ddl1").kendoDropDownList({
autoBind: false
...
}).data("kendoDropDownList");
至:
var ddl1 = $("#ddl1").kendoDropDownList({
autoBind: true
...
}).data("kendoDropDownList");
对于每个下拉控件,强制 dataSource
在页面加载时填充。
令我惊讶的是,我在尝试 select 一个尚不存在的元素时没有收到任何 Web 浏览器错误。
我正在使用 Kendo 控件(特别是 Grid
和 Drop Down Lists
)。
由于 Kendo 网格组件上没有用于双击事件的内置处理程序,我编写了一些 JQuery 代码来解决这个问题。
通过检查浏览器控制台,我可以看到触发了双击事件以及从网格中提取相关数据项。
问题在于从双击函数中调用的 applySelections
。我想根据行 selected 上的数据从六个 Kendo 下拉列表中预 select 值。在此之后,我在每个下拉列表上触发 change
事件以应用相关过滤器。
$(document).ready(function () {
var grid = $("#grid").data("kendoGrid");
grid.tbody.on("dblclick", "tr", function (e) {
var test = grid.dataItem(this);
applySelections(grid.dataItem(this));
});
function applySelections(item) {
$('#ddl1').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[0].ID;
});
$('#ddl2').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[1].ID;
});
$('#ddl3').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[2].ID;
});
$('#ddl4').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[3].ID;
});
$('#ddl5').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[4].ID;
});
$('#ddl6').data('kendoDropDownList').select(function (dataItem) {
return dataItem.ID === item.subItems[5].ID;
});
$("#ddl1").data("kendoDropDownList").trigger("change");
$("#ddl2").data("kendoDropDownList").trigger("change");
$("#ddl3").data("kendoDropDownList").trigger("change");
$("#ddl4").data("kendoDropDownList").trigger("change");
$("#ddl5").data("kendoDropDownList").trigger("change");
$("#ddl6").data("kendoDropDownList").trigger("change");
}
}
在第一次双击时,我跟踪了代码,可以看到正在执行的初始双击功能。但是,正在触发 applySelections
函数中的 select
个事件中的 none 个。下一次,对每个下拉菜单执行相同的代码,并观察到预期的结果。
经过进一步检查,结果证明解决方案相对简单(而且显而易见)。下拉控件 autoBind
值设置为 false
,这意味着我的 select
事件与 select
无关。
变化中:
var ddl1 = $("#ddl1").kendoDropDownList({
autoBind: false
...
}).data("kendoDropDownList");
至:
var ddl1 = $("#ddl1").kendoDropDownList({
autoBind: true
...
}).data("kendoDropDownList");
对于每个下拉控件,强制 dataSource
在页面加载时填充。
令我惊讶的是,我在尝试 select 一个尚不存在的元素时没有收到任何 Web 浏览器错误。