关于jquery的on方法在动态改变元素class之后

chrislee1981 2013-05-29 12:07:23

代码如下
$('.a').on('click',function(){
alert('a');
$('.a').removeClass('a').addClass('b');
});
$('.b').on('click',function() {
alert('b');
$('.b').removeClass('b').addClass('a');
});
每次点击弹出的都是a,要刷新页面后再次点击才弹出b,也就是必须要刷新页面才能改变
请问怎么解决，谢谢各位。

...全文

411 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

kinghome 2013-05-31

打赏
举报

$('body').on("click",".a",function(e){ $(e.currentTarget).removeClass("a").addClass("b") }); $('body').on("click",".b",function(e){ $(e.currentTarget).removeClass("b").addClass("a") });

铁克禁卫军 2013-05-29

打赏
举报

为啥不用toggle()来切换样式和弹出框

bbjbepzz 2013-05-29

打赏
举报

引用 3 楼 chrislee1981 的回复:

[quote=引用 2 楼 xiaofanku 的回复:]
jQuery(function($){
	$('a').toggle(function(){
		alert('a');
		$(this).removeClass('b').addClass('a');
	},function(){
		alert('b');
		$(this).removeClass('a').addClass('b');
	});
	
});
楼主有一点要搞清，如果你要侦听样式定义变化，你的写法是错误的

--------------------------------------------------------------------------- 谢谢指点。我想说的是在JQUERY之前的版本中，如果用live方法是正常的，但1.9后，live方法不能使用，我想知道的是怎么用on方法达到相同的效果，也就是绑定click事件后与ajax结合通过后台获取状态通过点击动态改变样式[/quote] 1.9没有live了，用delegate吧。 $('body').delegate('.a','click',function(){ alert('a'); $('.a').removeClass('a').addClass('b'); }); $('body').delegate('.b','click',function() { alert('b'); $('.b').removeClass('b').addClass('a'); });

chrislee1981 2013-05-29

打赏
举报

多谢楼上各位，我的本意是在一个元素上通过click事件改变class,让该元素的式样来回切换,在老版的JQUERY中用LIVE方法是最简单可以的，但在1.9版中删除了LIVE，所以想知道如何用ON方法达到相同的效果。

ftszhang 2013-05-29

打赏
举报

街头小贩 2013-05-29

打赏
举报

样式最好先定义出来，只要把新的样式定义名称赋值给元素，就可以看到效果了


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://img.renzhe.com/static/js/jquery-1.8.3.min.js"></script>
<title>无标题文档</title>
<style type="text/css">
a{text-decoration:none;color:#f00}
.b{color:#000}
</style>
</head>

<body>
<a href="javascript:;" >this is anchor</a>
<script type="text/javascript">
jQuery(function($){
	$('a').click(function(){
		$(this).toggleClass('b');
	});
});
</script>
</body>
</html>

chrislee1981 2013-05-29

打赏
举报

引用 2 楼 xiaofanku 的回复:

jQuery(function($){
	$('a').toggle(function(){
		alert('a');
		$(this).removeClass('b').addClass('a');
	},function(){
		alert('b');
		$(this).removeClass('a').addClass('b');
	});
	
});
楼主有一点要搞清，如果你要侦听样式定义变化，你的写法是错误的

街头小贩 2013-05-29

打赏
举报


jQuery(function($){
	$('a').toggle(function(){
		alert('a');
		$(this).removeClass('b').addClass('a');
	},function(){
		alert('b');
		$(this).removeClass('a').addClass('b');
	});
	
});

楼主有一点要搞清，如果你要侦听样式定义变化，你的写法是错误的