Kendo 工具栏按钮在启用后未触发点击事件
Kendo toolbar button not firing click event after being enabled
这是我的逻辑,在这里我试图禁用保存更改按钮并在用户输入重复值时阻止其上的点击事件,并在用户更改值时再次启用它但在启用它后更新/保存事件没有发生是我做错了什么吗?这是我的代码
function OnChange(data) {
//data.preventDefault();
$(".k-grid-save-changes")
.attr("role", "button")
.removeClass("k-state-disabled")
//.addClass("k-grid-save-changes")
.click(function () {
return true;
});
//console.log("data", data.items["0"].ProviderTypeName);
var name = data.items["0"].ProviderTypeName;
var Id = data.items["0"].Id;
var grid = $("#grid").data("kendoGrid");
//console.log("Grid ", grid);
grid.tbody.find('>tr').each(
function () {
$(this).css('background', 'white');
var dataItem = grid.dataItem(this);
//console.log(dataItem.ProviderTypeName)
if (dataItem.ProviderTypeName == name && dataItem.Id != Id) {
$(this).css('background', 'red');
$(".k-grid-save-changes")
//.removeClass("k-grid-save-changes")
.addClass("k-state-disabled")
//.removeAttr("role")
.click(function () {
return false;
});
}
});
}
这是调用 on change 事件的地方
.Events(events => events.RequestStart("OnRequestStart").Change("OnChange").RequestEnd("OnRequestEnd").Error("onError"))
如果我删除 "return false;" 它会按预期工作,但这允许保存重复的值。所以我用了这个。
如果我在你的代码中理解正确,你就会完全按照你提到的问题去做。在每次更改时,您都会使用 return false 禁用保存功能。您在任何时候都不要再次启用它。
如果您将事件处理程序添加到按钮,则您必须稍后撤消它。因为尽管我不认为验证应该发生在更改事件中但是在单击按钮时我建议使用网格保存事件,您可以在其中迭代网格的 dataSource.data() (更好)做你的检查是否发生任何事情 return false。
由于您可能想要 css 背景效果,另一种方法是保留您的代码并丢弃点击事件。只需设置一个可以在保存事件中使用的标志。像这样:
if(// your control){
$(this).css('background', 'red');
duplicatedValue = true;
}else{
.removeClass("k-grid-save-changes");
duplicatedValue = false;
}
并且在保存事件中
function onSave(){
if(duplicatedValue){
return false;
}
}
这是我的逻辑,在这里我试图禁用保存更改按钮并在用户输入重复值时阻止其上的点击事件,并在用户更改值时再次启用它但在启用它后更新/保存事件没有发生是我做错了什么吗?这是我的代码
function OnChange(data) {
//data.preventDefault();
$(".k-grid-save-changes")
.attr("role", "button")
.removeClass("k-state-disabled")
//.addClass("k-grid-save-changes")
.click(function () {
return true;
});
//console.log("data", data.items["0"].ProviderTypeName);
var name = data.items["0"].ProviderTypeName;
var Id = data.items["0"].Id;
var grid = $("#grid").data("kendoGrid");
//console.log("Grid ", grid);
grid.tbody.find('>tr').each(
function () {
$(this).css('background', 'white');
var dataItem = grid.dataItem(this);
//console.log(dataItem.ProviderTypeName)
if (dataItem.ProviderTypeName == name && dataItem.Id != Id) {
$(this).css('background', 'red');
$(".k-grid-save-changes")
//.removeClass("k-grid-save-changes")
.addClass("k-state-disabled")
//.removeAttr("role")
.click(function () {
return false;
});
}
});
}
这是调用 on change 事件的地方
.Events(events => events.RequestStart("OnRequestStart").Change("OnChange").RequestEnd("OnRequestEnd").Error("onError"))
如果我删除 "return false;" 它会按预期工作,但这允许保存重复的值。所以我用了这个。
如果我在你的代码中理解正确,你就会完全按照你提到的问题去做。在每次更改时,您都会使用 return false 禁用保存功能。您在任何时候都不要再次启用它。
如果您将事件处理程序添加到按钮,则您必须稍后撤消它。因为尽管我不认为验证应该发生在更改事件中但是在单击按钮时我建议使用网格保存事件,您可以在其中迭代网格的 dataSource.data() (更好)做你的检查是否发生任何事情 return false。
由于您可能想要 css 背景效果,另一种方法是保留您的代码并丢弃点击事件。只需设置一个可以在保存事件中使用的标志。像这样:
if(// your control){
$(this).css('background', 'red');
duplicatedValue = true;
}else{
.removeClass("k-grid-save-changes");
duplicatedValue = false;
}
并且在保存事件中
function onSave(){
if(duplicatedValue){
return false;
}
}