为什么我的jQuery focusout(或blur)事件没有被触发?
Why is my jQuery focusout (or blur) event not being fired?
在jsfiddle的底部,我有这样的HTML:
<input type="text" id="BLAboxPaymentAmount" value="2">
</br>
<input type="text" id="BLAboxSection5Total" value="3">
. .这个jQuery:
$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
var totalvalue = $(this).val();
//alert("boxSection5Total val is " + totalvalue);
var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
//alert("Payment Total val is " + paymenttotalvalue);
if (totalvalue !== paymenttotalvalue) {
alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
} else {
alert("values ARE equal");
}
});
它在jsfiddle中工作得很好,但事件没有在我的Sharepoint页面中触发-我在boxPaymentAmount("5")中输入一个值,在boxSection5Total("6")中输入另一个值,在boxSection5Total中输入标签,我没有看到警报,因为我应该,基于这个jQuery,这几乎与jsfiddle中的内容相同:
$(document).on("focusout", '[id$=boxSection5Total]', function (e) {
alert("focusout event has fired");
var totalvalue = $(this).val();
var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
if (totalvalue !== paymenttotalvalue) {
alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
}
});
所以事件甚至没有被触发-为什么不呢?
我在Chrome和F12d中运行页面,在控制台中寻找错误消息,但没有发现。
更新For A. (not "The") Wolff:
我是这样在代码后面创建元素的:
boxPaymentAmount = new TextBox
{
CssClass = "dplatypus-webform-field-input"
};
我还在jsfiddle中将HTML中的"textarea"改为"text"。
更新2
乔纳森(不是拉塞尔)克劳:
我改变了我的jQuery如下:
$(document).on("blur", "[id$=boxSection5Total]", function (e) {
alert("blur event has fired");
console.log("blur event has fired");
var totalvalue = $(this).val();
var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
if (totalvalue !== paymenttotalvalue) {
alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
}
else {
console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
}
});
…并且在控制台中仍然看不到来自此事件处理程序的任何内容。
3
更新我有许多其他函数/处理程序可以很好地启动;所以为什么这个没有是一个谜。也许如果我展示我所得到的(省略一些血腥的细节),它可能会揭示一些正在发生的事情(失败的函数是最后一个/在底部):
$(document).ready(function () {
console.log('The ready function has been reached; Requester and Payee Status sections should be slid up'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
});
/* NOTE: Things that need to take place after all the elements have been constructed need to go here; the ready function can be too early */
$(window).load(function () {
$('[id$=_AddressRows]').slideUp();
$('[id$=panelSection2]').slideUp();
$('[id$=panelSection3]').slideUp();
$('[id$=ddlPayToVendor]').hide();
});
/* NOTE: this checkbox is only visible if they are not already authenticated; If they select "Yes" (self-identify as UCSC Faculty, Staff, or Student), prompt them to log in */
$(document).on("change", '[id$=ckbxUCSCFacultyStaffOrStudent]', function () {
var ckd = this.checked;
. . . code elided for brevity
});
/* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
$(document).on("click", '[id$=rbPaymentForSelf]', function () {
if (this.checked) {
. . . code elided for brevity
}
});
/* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
$(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
if (this.checked) {
. . . code elided for brevity
}
});
$(document).on("click", '[id$=rbPaymentToIndividual]', function () {
if (this.checked) {
$('[id$=ddlPayToVendor]').slideUp();
$('[id$=ddlPayToIndividual]').slideDown();
}
});
$(document).on("click", '[id$=rbPaymentToVendor]', function () {
if (this.checked) {
$('[id$=ddlPayToIndividual]').slideUp();
$('[id$=ddlPayToVendor]').slideDown();
}
});
// Refactor this to populate the elements below (description, account codes, tax 1099); may pull from Lists rather than use the hardcoded vals, but if need to do the latter, see http://jsfiddle.net/clayshannon/x8npcpss/3/
$(document).on("change", '[id$=ddlPayToIndividual]', function () {
var value = $(this).val();
. . . code elided for brevity
});
// Refactor this ... (see comment above)
$(document).on("change", '[id$=ddlPayToVendor]', function () {
var value = $(this).val();
. . . code elided for brevity
});
/* Disallow anything other than 0..9 in the "SSN or ITIN" textbox */
$(document).on("keypress", '[id$=txtbxSSNOrITIN]', function (e) {
var k = e.which;
if (k < 48 || k > 57) { e.preventDefault(); }
});
$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
var textboxHeight = 15;
. . . code elided for brevity
});
$(document).on("keyup", "[id$=explainPaymentTextBox]", function (e) {
console.log("explainPaymentTextBox keyup reached");
while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))) {
$(this).height($(this).height() + 1);
};
});
HERE IS THE RECALCITRANT ONE (DOESN'T FIRE):
/* Verify that amount in "Total" equals amount in Section 1 "Payment Amount"; this is not working at present; I first tried "focusout" instead of "blur" but neither event fires... */
$(document).on("blur", "[id$=boxSection5Total]", function (e) {
alert("boxSection5Total's blur event has fired");
console.log("boxSection5Total's blur event has fired");
var totalvalue = $(this).val();
var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
if (totalvalue !== paymenttotalvalue) {
alert("The value in 'Total' does not equal the previous value in 'Payment Total'");
console.log("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
}
else {
console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
}
});
您是否尝试使用blur
而不是focusout
?这两个事件之间的区别可以在这里找到,在您的示例中,您只想为textarea捕获事件,因为它内部没有任何项。
这是一个"新手错误"——我忘记给元素分配ID了。有一次我把代码改成这样:
boxSection5Total = new TextBox()
{
CssClass = "dplatypus-webform-field-input"
};
this.Controls.Add(boxSection5Total);
…:
boxSection5Total = new TextBox()
{
CssClass = "dplatypus-webform-field-input",
ID = "boxSection5Total"
};
this.Controls.Add(boxSection5Total);
…我看到了关于进入事件的警告。
所以UPDATE显示了错误的代码,尽管它需要习惯于在c#中动态创建html元素的人来捕获它。
对于"全面披露",这是现在的jQuery(按设计工作):
$(document).on("blur", "[id$=boxSection5Total]", function (e) {
var totalvalue = $(this).val();
var paymenttotalvalue = $('[id$=boxPaymentAmount]').val();
if (totalvalue !== paymenttotalvalue) {
console.log("The value in 'Total' does not equal the previous value in 'Payment Total'");
alert("The value in 'Total' does NOT equal the previous value in 'Payment Total'");
}
else {
console.log("The value in 'Total' DOES equal the previous value in 'Payment Total'");
}
});
当我在F12工具中"检查元素"时,我明白了:
<input name="ctl00$ctl24$g_5f3fedca_19f7_4bc3_b84e_efbef0c48a33$ctl00$ctl153" type="text" class="dplatypus-webform-field-input">
(ID)。
- 选择onclick事件jquery
- 用于多个类事件Jquery的单个函数
- 激发滑块's幻灯片事件jquery ui
- 设置重复按钮以注册点击事件jquery
- 保留当前点击事件jquery
- 启动/停止按键事件jquery
- 在事件jquery中插入一个函数
- 删除克隆的事件JQuery
- typeahead选择事件(jQuery)的动态绑定
- 触发自定义事件 Jquery
- 绑定两次或更多次的事件 jquery
- 单击时的事件 jquery 不起作用
- 在鼠标悬停事件 jquery 上显示边框的内容
- 同时触发两个鼠标事件 jQuery
- 焦点事件 jquery 组合框/自动完成
- 如何在页面中捕获“正文”和“正文”事件[Jquery].
- 将对象传递给事件 jQuery
- 验证“取消”上的字段 单击Onbeforeunload事件JQUERY
- 复选框单击事件 jQuery 不起作用
- 口述事件jquery顺序