The Change event problem resolution process for jquery incompatible input _jquery

Source: Internet
Author: User

Recently developed a project, need to implement the user in the Web Form in multiple input boxes in the number, immediately automatically calculate the sum of the total number of inputs and display in the specified input box, the principle of the implementation of this function is simple, It is only necessary to calculate the sum in the onchange event of input and assign the result to the specified input box, the code is as follows:

Copy Code code as follows:

$ ("Input.syxcost"). Change (function () {
Computereceivedsyxcost ();
}
function Computereceivedsyxcost () {//Calculate add Total
var syxcost=0;
$ ("Input.syxcost"). each (function () {
var cost=parsefloat ($ (this). Val ());
if (!isnan (cost))
Syxcost=syxcost + cost;
});
$ ("#receivedsyxcost"). Val (syxcost); Show final Results
}

Originally thought this solves, in Google Browser is really ok, but in IE 9, but found in input quantity, and will not immediately trigger the change event, there is a compatibility problem, search on the internet a lot, also said that there is no way, I will only be based on the implementation of their own to write, My train of thought is: When input gets the focus, it gets the current value and stores the input's custom properties (such as: Data-oval) and then, when input loses focus, gets whether the current value is the same as the values in the previously existing custom attribute, if not the same , the value is changed, it needs to be recalculated, otherwise ignored, the implementation code is as follows:

Copy Code code as follows:

$ ("Input.syxcost"). focus (function () {
$ (this). attr ("Data-oval", $ (this). Val ()); Save current value to custom attribute
}). blur (function () {
var oldval= ($ (this). attr ("Data-oval")); Get the original value
var newval= ($ (this). Val ()); Get Current value
if (oldval!=newval)
{
Computereceivedsyxcost (); Does not have the same calculation
}
});

After repeated verification, in all browsers are displayed normal, solve the problem of compatibility!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.