关于解决JQUERY对INPUT元素Change事件不兼容的问题
最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现,代码如下:
$("input.syxcost").change(function(){
computeReceivedsyxcost();
}
function computeReceivedsyxcost(){ //计算加总
var syxcost=0;
$("input.syxcost").each(function(){
var cost=parseFloat($(this).val());
if (!isNaN(cost))
syxcost=syxcost + cost;
});
$("#receivedsyxcost").val(syxcost); //显示最终结果
}
原以为这样就解决了,在谷歌浏览器确实是OK的,但在IE 9中,却发现在INPUT中输入数量后,并不会立即触发change事件,存在兼容问题,在网上搜了许多,也都说存在这个问题,没有办法,我就只有自己来依据实现情况来写,我的思路是:当INPUT获取焦点时,就获取当前的VALUE并存入该INPUT的自定义的属性中(如:data-oval),然后在INPUT失去焦点的时候,就获取当前的VALUE与之前存在自定义的属性中的值是否相同,若不相同,则说明VALUE被改变,就需要重新计算,否则忽略,实现代码如下:
$("input.syxcost").focus(function(){
$(this).attr("data-oval",$(this).val()); //将当前值存入自定义属性
}).blur(function(){
var oldVal=($(this).attr("data-oval")); //获取原值
var newVal=($(this).val()); //获取当前值
if (oldVal!=newVal)
{
computeReceivedsyxcost(); //不相同则计算
}
});
经反复验证,在所有的浏览器下均显示正常,解决了兼容的问题!
关于解决JQUERY对INPUT元素Change事件不兼容的问题的更多相关文章
- jquery绑定input的change事件
### jquery绑定input的change事件 背景:在做一个登录页时,如果用户未输入验证码则无法点击登录按钮,所以想到了用input的change事件,但是在写完后发现无法监听input值的改 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- jquery监听动态添加的input的change事件
使用下面方法在监听普通的input的change事件正常 $('#pp').on('change', 'input.videos_poster_input', function () { consol ...
- 复选框 省市区 联动(监听input的change事件)
需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省 选择对应的第一个市区,同时默认选中第 ...
- 单选框radio改变事件详解(用的jquery的radio的change事件)
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- jQuery input -> file change事件bug
由jQuery绑定类型为file的input控件的change事件,发现只能被触发一次,修改方法 --> 原始代码: $input.change(function() { // somethin ...
- js闭包理解案例-解决for循环为元素注册事件的问题
转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html 一.变量的作用域 要理解闭包,首 ...
- jquery为新增元素添加事件
<script type="text/javascript"> var $id=1; $(function(){ $(".hehe").click( ...
随机推荐
- ngnix编译遇到的问题.
总结:先后遇到libz库文件没有正确的链接和pcre库文件没有正确的链接 1./configure后提示需要zlib 2.locate zlib,系统中没有zlib的共享库so文件,但是有一些头文件, ...
- Android源码分析-全面理解Context
前言 Context在android中的作用不言而喻,当我们访问当前应用的资源,启动一个新的activity的时候都需要提供Context,而这个Context到底是什么呢,这个问题好像很好回答又好像 ...
- zookeeper节点Watch机制实例展示
znode以某种方式发生变化时,“观察”(watch)机制可以让客户端得到通知.可以针对ZooKeeper服务的“操作”来设置观察,该服务的其他 操作可以触发观察. 实现Watcher,复写proce ...
- asp.net 的page 基类页面 做一些判断 可以定义一个基类页面 继承Page类 然后重写OnPreLoad事件
public class BasePage:Page protected override void OnPreLoad(EventArgs e){ base.OnPreLoad(e); ...
- Ubunbu新建的用户使用SecureCrt无法Table补全、无法高亮
Check 两个地方: 1. 确保/etc/passwd中配置有/bin/bash (这个是用来控制补全). 2. 在~/.bashrc中配置, export TERM=linux (这个是用来控制 ...
- ffmpeg安装的问题
php语音转换需要安装ffmpeg文件 参考地址: http://thierry-xing.iteye.com/blog/2017864 http://diogomelo.net/blog/11/en ...
- js-2
var myarray= new Array(); var myarray= new Array(8); var myarray= new Array(66,80,60,59,70); var mya ...
- android_audio
参考 source.android.com/devices/audio.html
- “远程调试监视器(MSVSMON.EXE)似乎没有在远程计算机上运行“的完美解决方案
今天调试程序时,Visual Studio突然报出了如下错误: Microsoft Visual Studio 远程调试监视器(MSVSMON.EXE)似乎没有在远程计算机上运行.这可能是因为防火墙阻 ...
- Foundation框架基本数据类型
NSNubmer NSNumber是一个类,该类中存在多种处理数值的方法,可直接创建该类的实例变量 // 定义3个NSNumber类型的变量 NSNumber *myNumber, *floatNum ...