为什么我的变更处理程序永远不会被解雇?
Why is my change handler never being fired?
我有这个 jQuery,来自 Gregor Primar :
发布的内容
/* 每当 boxGrandTotal 发生变化时(在任何 "amount" 输入文本元素中输入任何金额时都会发生变化),如果总计之间存在差异,则禁用保存按钮 */
$(document).on("change", '[id$=boxGrandTotal]', function () {
//var savebutton = $("[id$=btnSave]");
alert('entered the change handler for boxGrandTotal');
var savebutton = document.getElementById('[id$=btnSave]');
var payment = parseFloat(document.getElementById('[id$=boxPaymentAmount]').value).toFixed(2);
var total = parseFloat(document.getElementById('[id$=boxGrandTotal]').value).toFixed(2);
if (payment == null) payment = 0;
if (total == null) total = 0;
if (payment == total) {
savebutton.attr("disabled", false);
return true;
} else {
alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
savebutton.attr("disabled", true);
return false;
}
});
这应该在任何时候 boxGrandTotal 更新时触发,对吧?它确实正在更新,但我从未看到 "entered the change handler for boxGrandTotal"
还有是一个ID以"boxGrandTotal"结尾的文本框/文本输入元素;这是它在代码隐藏中的创建方式:
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal"
};
那么当 boxGrandTotal 中的值发生变化时,为什么 'change' 处理程序没有触发?它是否仅在 手动 更改值时触发?如果是这样,有什么解决方法?
更新
响应kalkanbatuhan的建议,将我的代码隐藏更改为:
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal",
ClientIDMode = System.Web.UI.ClientIDMode.Static
};
...发出两个编译器错误,具体来说:
'System.Web.UI.WebControls.TextBox' 不包含 'ClientIDMode'
的定义
-和:
命名空间 'System.Web.UI' 中不存在类型或命名空间名称 'ClientIDMode'(是否缺少程序集引用?)
更新 2
顺便说一句*,boxGrandTotal 中的值是这样改变的:
$(document).on("blur", '.amountbox', function (e) {
var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});
试试这个
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal",
ClientIDMode =System.Web.UI.ClientIDMode.Static
};
解决方案是在赋值代码中添加一个“.trigger("change")”,这样,就不是这样:
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
...就是这个:
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");
更详细地说,更改值必须在更改时显式触发(注意附加的“.trigger()”爵士乐):
$(document).on("blur", '.amountbox', function (e) {
var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
. . .
var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");
});
...然后这段代码工作得很好:
/* Whenever boxGrandTotal changes (which it does when any amount is entered in any of the "amount" input text elements), disable the save button if there is a discrepancy between the totals */
$(document).on("change", '[id$=boxGrandTotal]', function () {
var savebutton = document.getElementById('[id$=btnSave]');
var payment = $('[id$=boxPaymentAmount]').val() != '' ? parseFloat($('[id$=boxPaymentAmount]').val()) : 0;
var total = $('[id$=boxGrandTotal]').val() != '' ? parseFloat($('[id$=boxGrandTotal]').val()) : 0;
if (payment == null) payment = 0;
if (total == null) total = 0;
if (payment == total) {
savebutton.attr("disabled", false);
return true;
} else {
alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
//savebutton.attr("disabled", true);
savebutton.prop("disabled", true);
return false;
}
});
我说“很好”而不是“非常棒”,因为保存按钮没有被禁用。
我有这个 jQuery,来自 Gregor Primar
/* 每当 boxGrandTotal 发生变化时(在任何 "amount" 输入文本元素中输入任何金额时都会发生变化),如果总计之间存在差异,则禁用保存按钮 */
$(document).on("change", '[id$=boxGrandTotal]', function () {
//var savebutton = $("[id$=btnSave]");
alert('entered the change handler for boxGrandTotal');
var savebutton = document.getElementById('[id$=btnSave]');
var payment = parseFloat(document.getElementById('[id$=boxPaymentAmount]').value).toFixed(2);
var total = parseFloat(document.getElementById('[id$=boxGrandTotal]').value).toFixed(2);
if (payment == null) payment = 0;
if (total == null) total = 0;
if (payment == total) {
savebutton.attr("disabled", false);
return true;
} else {
alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
savebutton.attr("disabled", true);
return false;
}
});
这应该在任何时候 boxGrandTotal 更新时触发,对吧?它确实正在更新,但我从未看到 "entered the change handler for boxGrandTotal"
还有是一个ID以"boxGrandTotal"结尾的文本框/文本输入元素;这是它在代码隐藏中的创建方式:
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal"
};
那么当 boxGrandTotal 中的值发生变化时,为什么 'change' 处理程序没有触发?它是否仅在 手动 更改值时触发?如果是这样,有什么解决方法?
更新
响应kalkanbatuhan的建议,将我的代码隐藏更改为:
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal",
ClientIDMode = System.Web.UI.ClientIDMode.Static
};
...发出两个编译器错误,具体来说:
'System.Web.UI.WebControls.TextBox' 不包含 'ClientIDMode'
的定义-和:
命名空间 'System.Web.UI' 中不存在类型或命名空间名称 'ClientIDMode'(是否缺少程序集引用?)
更新 2
顺便说一句*,boxGrandTotal 中的值是这样改变的:
$(document).on("blur", '.amountbox', function (e) {
var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});
试试这个
boxGrandTotal = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxGrandTotal",
ClientIDMode =System.Web.UI.ClientIDMode.Static
};
解决方案是在赋值代码中添加一个“.trigger("change")”,这样,就不是这样:
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
...就是这个:
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");
更详细地说,更改值必须在更改时显式触发(注意附加的“.trigger()”爵士乐):
$(document).on("blur", '.amountbox', function (e) {
var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
. . .
var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
$('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2)).trigger("change");
});
...然后这段代码工作得很好:
/* Whenever boxGrandTotal changes (which it does when any amount is entered in any of the "amount" input text elements), disable the save button if there is a discrepancy between the totals */
$(document).on("change", '[id$=boxGrandTotal]', function () {
var savebutton = document.getElementById('[id$=btnSave]');
var payment = $('[id$=boxPaymentAmount]').val() != '' ? parseFloat($('[id$=boxPaymentAmount]').val()) : 0;
var total = $('[id$=boxGrandTotal]').val() != '' ? parseFloat($('[id$=boxGrandTotal]').val()) : 0;
if (payment == null) payment = 0;
if (total == null) total = 0;
if (payment == total) {
savebutton.attr("disabled", false);
return true;
} else {
alert('Total and Payment Total do not match. Please enter the same amount for both values and try again!');
//savebutton.attr("disabled", true);
savebutton.prop("disabled", true);
return false;
}
});
我说“很好”而不是“非常棒”,因为保存按钮没有被禁用。