checkbox的change事件(IE浏览器change事件问题及解决方法)
2017-10-25 21:00
387 查看
在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件。
上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框不会立即弹出对话框。 必须在选中或取消复选框之后再点击除了复选框之外的任何一个地方,据说是因为IE会等到复选框失去焦点之后才会触发change事件。
优化上述代码:
补充:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去焦点,这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。
如果是radio,将checkbox换成radio即可。
其他两种替代方法:
IE下,当一个HTML元素的属性改变的时候,都能通onpropertychange来捕获。例如一个
对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
也就是说:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件!
例1:
请输入图片地址:
当text框中的内容被改变时,图片就会立刻被显示出来。而如果用onchange时,改变其值时还需用鼠标单击空白或其他地方使input元素失去焦点(onblur)才能激活该事件,图片显示才会被改变!
$('document').ready(function(){ $('#checkbox').change(function(){ alert('checked'); }) })
上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框不会立即弹出对话框。 必须在选中或取消复选框之后再点击除了复选框之外的任何一个地方,据说是因为IE会等到复选框失去焦点之后才会触发change事件。
优化上述代码:
$(function(){ if ($.browser.msie) { $('input:checkbox').click(function () { this.blur(); this.focus(); }); }; $("#ischange").change(function() { alert("checked"); }); });
补充:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去焦点,这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。
如果是radio,将checkbox换成radio即可。
其他两种替代方法:
<input type=checkbox onclick="alert(this.value)" value=huerreson>
<input type=checkbox onpropertychange="alert(this.value)" value=huerreson>
IE下,当一个HTML元素的属性改变的时候,都能通onpropertychange来捕获。例如一个
<input name="text1" id="text1" />
对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
也就是说:onpropertychange能及时捕获属性值的变化,而onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件!
例1:
请输入图片地址:
<input type="text" name="mytext" size="10" value="" onpropertychange="document.images['myimg'].src=this.value;" /> <img id="myimg" src="/img/common/logo.gif" alt="" />
当text框中的内容被改变时,图片就会立刻被显示出来。而如果用onchange时,改变其值时还需用鼠标单击空白或其他地方使input元素失去焦点(onblur)才能激活该事件,图片显示才会被改变!
相关文章推荐
- 解决checkbox的onclick事件在ie浏览器各版本中不兼容问题
- 解决GridView中嵌入CheckBox,事件无法响应的问题
- javascript中onmouse事件在div中失效问题的解决方法
- 图片onload事件触发问题解决方法
- CheckBox在ListView中导致其点击事件不会被触发解决方法
- AutoCompleteExtender无法触发textbox onchange事件的解决方法
- file上传控件onchange事件失效的解决方法
- 【转】解决GridView中嵌入CheckBox事件无法响应的问题
- 解决GridView中嵌入CheckBox事件无法响应的问题
- js绑定事件this指向发生改变的问题解决方法
- Cannot change version of project facet Dynamic Web Module to 2.5 问题的解决方法
- php表单中checkbox问题解决方法
- Javascript JQuery 图片预加载load事件IE不兼容的问题的解决方法
- Struts 2 使用属性模型取checkbox 值出现问题解决方法。
- 在workflow中,无法为实例 ID“...”传递接口类型“...”上的事件“...” 问题的解决方法。
- 在workflow中,无法为实例 ID“...”传递接口类型“...”上的事件“...” 问题的解决方法。
- CheckBox android:paddingLeft 不兼容问题解决方法
- 转:用ATL库开发COM组件常见的几个问题 (ie不响应事件,解决悲剧的方法)
- form表单内 checkbox 的 onclick事件 typeError: *** not a function 调用方法类型错误 解决
- 解决因焦点转移到其它组件,导致在 JFrame 中捕获不到键盘按键事件问题的方法