jquery中attr()在ie中失效怎么处理?

我用jquery中的attr()实现一个连续点击的效果;发现attr()在ie中失效。
代码如下:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Editplus4PHP" />
<meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" />
<meta name="description" content="LeoPHP - Powered by HentStduio" />
<meta name="author" content="Leo" />
<link rel="shortcut icon" href="images/favicon.ico" />
<title>jquery attr</title>
<script type="text/javascript" src="http://static.mogupai.com/js/jquery.js"></script>
<script type="text/javascript">
<!--
function test($id) {
alert('test'+$id);
$(' #test_'+$id).attr('onclick','deltest('+$id+')');
$(' #test_'+$id).html('删除点击'+$id);
//$(" #test_"+$id).removeAttr('onclick');
//$(" #test_"+$id).click(deltest($id));

}

function deltest($id) {
$(' #test_'+$id).attr('onclick','test('+$id+')');
$(' #test_'+$id).html('点击'+$id);
alert('deltest'+$id);
}

//-->
</script>
</head>
<body>
<div id='test_1' onclick='test(1)'>
点击1
</div>
<div id='test_2' onclick='test(2)'>
点击2
</div>
<div id='test_3' onclick='test(3)'>
点击3
</div>
<div id='test_4' onclick='test(4)'>
点击4
</div>

</body>
</html>

执行上面代码,通过firebug可以看到,onclick一开始是触发test函数;
请输入图片描述

当我点击之后onclick就触发deltest函数

请输入图片描述

而ie中当我点击完第一次后,再点击下一次就没有效果了。

Geo5
Geo5
463
编辑于2012-03-06
评论 (0)链接2012-03-06 

换个写法,用live + toggle就好了,原来不知道你需要动态增加div,现在给你改好了,增加也没问题

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Editplus4PHP" />
<meta name="keywords" content="Leo, HentStudio, Editplus4PHP, LeoPHP" />
<meta name="description" content="LeoPHP - Powered by HentStduio" />
<meta name="author" content="Leo" />
<link rel="shortcut icon" href="images/favicon.ico" />
<title>jquery attr</title>
<script type="text/javascript" src="http://static.mogupai.com/js/jquery.js"></script>
<script type="text/javascript">
<script type="text/javascript">
$(function(){
$('body').append("<div id='test_5'>点击5</div>");//测试:动态添加div5
$('div').live('click',function(){
$(this).toggle(function(i){
$(this).html('删除点击' + ($(this).index()+1) );
alert( 'test' + ($(this).index()+1) );
},
function(i){
$(this).html('点击' + ($(this).index()+1) );
alert( 'deltest' + ($(this).index()+1) );
}
);
$(this).trigger('click');
});
});
</script>
</head>
<body>
<div id='test_1'>点击1</div>
<div id='test_2'>点击2</div>
<div id='test_3'>点击3</div>
<div id='test_4'>点击4</div>
</body>
</html>
阿福
编辑于 2012-03-06
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (2)链接 • 2012-03-06
  • 0 支持
    这个方法我试了,当我下面又添加了其他的不用这个效果的div就不正常了~ – 鹿鹿_张 2012-03-06
  • 0 支持
    已经给你改过了,现在可以了 – 阿福 2012-03-06

//这个是W3C的标准,在兼容W3C标准的浏览器中有效
element.setAttribute('onclick','test('+$id+')')
//这样的设置在IE中才能有效
element.setAttribute('onclick','test('+$id+')')
最后补充一下,善用这个注释会好一点个人认为:
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5]>
<h1>版本 5</h1>
<![endif]-->
<!--[if IE 5.0]>
<h1>版本 5.0</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-08

既然用jquery那就把绑定事件之类的都使用jquery。

  
<div id='test_1' rel='on'>
点击1
</div>
<div id='test_2' rel='on' >
点击2
</div>
<div id='test_3' rel='on'>
点击3
</div>
<div id='test_4' rel='on'>
点击4
</div>

一个简单的例子:

  
<script type="text/javascript">
$("div").live('click',function() { //这里的选择器只是举例

if($(this).attr("rel") == "on") {
$(this).attr("rel","off");
$(this).html("删除点击" + $(this).attr("id").split("_")[1]);
}else{
$(this).attr("rel","on");
$(this).html("点击" + $(this).attr("id").split("_")[1]);
}

})
</script>
冯义军
冯义军
14.03K
编辑于 2012-03-17
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-11

最简单的方法就是使用jquery的toggle()方法。
如果是新创建出来的元素,需要改为live绑定点击事件,所以新创建出来的元素也是如此:

  
function mytoggle() {
$(this).toggle(function(){
$(this).html("删除点击" + $(this).attr('id').split('_')[1]);
},function(){
$(this).html("点击" + $(this).attr('id').split('_')[1]);
})
}
$('div').live('click',mytoggle).trigger('click');

//新创建出来的元素需要触发点击
$("<div id='test_5'>点击5</div>").appendTo('body').trigger('click');
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2012-03-17
德问是一个专业的编程问答社区,请 登录注册 后再提交答案