您的位置:首页 > Web前端 > JQuery

checkbox的change事件(IE浏览器change事件问题及解决方法)

2017-10-25 21:00 387 查看
在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件。

$('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)才能激活该事件,图片显示才会被改变!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery 事件 IE change
相关文章推荐