Detailed explanation of jQuery's solution to the incompatibility problem of input's change event

This article records the discovery in the project that the change event will not be triggered immediately in IE9, and the solution process for compatibility issues is very detailed. New problems also appeared during the solution process, and they were finally solved. Perfectly compatible with all major mainstream browsers

Recently, a project was developed that required the user to automatically calculate the sum of the input quantities immediately after the user inputs quantities into multiple INPUT boxes in the WEB form. And displayed in the specified INPUT box. The principle of implementing this function is simple, that is, you only need to calculate the total in the onchange event of INPUT and assign the result to the specified INPUT box. The code is as follows:

$("input.syxcost").change(function(){
   computeReceivedsyxcost();
}
function computeReceivedsyxcost(){  //计算加总
              var syxcost=0;
              $("input.syxcost").
each
(function(){
                 var cost=parse
Float
($(this).val());
                 if (!isNaN(cost))
                    syxcost=syxcost + cost;
              });
              $("#receivedsyxcost").val(syxcost); //显示最终结果
           }

I thought this would solve it. It is indeed OK in Google Chrome, but in IE 9, I found that after entering the amount in INPUT, the change event will not be triggered immediately. There is Regarding compatibility issues, I searched a lot on the Internet and they all said that this problem exists. There is no way. I have to write it myself based on the implementation. My idea is: when INPUT gets the focus, get the current VALUE and store it. INPUT's custom attribute (such as: data-oval), and then when INPUT loses focus, get whether the current VALUE is the same as the value in the previously existing custom attribute, if not , it means that VALUE has been changed and needs to be recalculated, otherwise it will be ignored. The implementation code is as follows:

$("input.syxcost").focus(function(){
                $(this).attr("data-oval",$(this).val()); //将当前值存入自定义属性
            }).blur(function(){
                var oldVal=($(this).attr("data-oval")); //获取原值
                var 
new
Val=($(this).val()); //获取当前值
                if (oldVal!=newVal)
                {
                    computeReceivedsyxcost(); //不相同则计算
                }
            });

After repeated verification, it displays normally in all browsers, solving the compatibility problem!

The above is the detailed content of Detailed explanation of jQuery's solution to the incompatibility problem of input's change event. For more information, please follow other related articles on the PHP Chinese website!