JQuery is not compatible with the process of solving the change event of input, jquerychange

JQuery is not compatible with the process of solving the change event of input, jquerychange

A recently developed project needs to automatically calculate the sum of the total INPUT values in multiple INPUT boxes in the WEB form and display them in the specified INPUT box, the implementation principle of this function is simple. You only need 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 codeThe Code is as follows:
$ ("Input. syxcost"). change (function (){
ComputeReceivedsyxcost ();
}
Function computeReceivedsyxcost () {// computing and total addition
Var syxcost = 0;
$ ("Input. syxcost"). each (function (){
Var cost = parseFloat ($ (this). val ());
If (! IsNaN (cost ))
Syxcost = syxcost + cost;
});
$ ("# Receivedsyxcost"). val (syxcost); // display the final result
}

I thought this would solve the problem. Google Chrome is indeed OK, but in IE 9, it was found that the change event is not triggered immediately after the number of inputs is entered, there is a compatibility problem. I searched a lot on the Internet and said that this problem exists. There is no way for me to write it on my own Based on the implementation situation. My idea is: when the INPUT gets the focus, it obtains the current VALUE and stores it in the custom attribute of the INPUT (for example, data-oval). When the INPUT loses the focus, obtain whether the current VALUE is the same as the VALUE in the custom attribute. If the VALUE is not the same, it indicates that the VALUE is changed and needs to be recalculated. Otherwise, ignore it. The implementation code is as follows:

Copy codeThe Code is as follows:
$ ("Input. syxcost"). focus (function (){
$ (This). attr ("data-oval", $ (this). val (); // Save the current value to a custom property
}). Blur (function (){
Var oldVal = ($ (this). attr ("data-oval"); // obtain the original value
Var newVal = ($ (this). val (); // get the current value
If (oldVal! = NewVal)
{
ComputeReceivedsyxcost (); // if not the same, the calculation is performed.
}
});

After repeated verification, all browsers are displayed normally, solving the compatibility problem!