JQuery事件委托机制实现案例

225 阅读 0 评论 149 点赞

我是靠谱客的博主阔达背包，这篇文章主要介绍JQuery事件委托机制实现案例，现在分享给大家，希望可以做个参考。

为什么80%的码农都做不了架构师？>>>

一、效果图展示

效果：点击下面工种，可移动到上面已选择位置。点击上面已选择的工种可还原到下面工种列表中。

二、源代码：

<!DOCTYPE html>
<html>
<head>
<title>招聘信息</title>
<meta charset="utf-8" />
<link href="css/reset.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/screen.css" rel="stylesheet" media="screen and (min-width:640px)" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
<script src="js/jquery-1.8.min.js"></script>
<script>
$(function(){
$('#items').find('a').live('click',function(){//从id=items的元素中找到a元素，单击a元素时触发function()函数。
var length = $('#selected').find('a').length;//获取id=selected的元素内a元素的个数
if(length<4){
$span = $("<span>");//创建span元素
$text = $(this).text();//获取本元素内的文本内容
$span.text($text);//设置span元素的文本内容
$span.addClass("fl");//为span添加class属性
$a = $("<a>");//创建a元素
$a.attr({href:'javascript:void(0)',id:'selected0'});//给a元素添加属性
$i = $("<i>");//创建i元素
$a.append($span);//把span元素插入a元素内
$a.append($i);	//把i元素插入a元素内
$("#selected").append($a);//把a元素插入id=selected的元素内
$(this).remove();//移除本元素
}else{
alert("最多只能选择4种工种");
}
 return false;
});  
//事件委托
$("#selected a").live("click",function(){
$a = $("<a>");
$text = $(this).find("span").text()
alert($text);
$a.text($text);
$a.attr("href","javascript:void(0);");
$("#items").append($a);
$(this).remove();
});
});
</script>
</head>
<body>
<!--header begin-->
<div id="head">
<img src="images/head1024.png" />
</div>
<!--header end-->
 
<!--main begin-->
<div id="main">
<p class="title">招聘信息 <span class="title-english">Recruitment Information</span></p>
<!--招聘分类-->
<div class="zf-classify">
<p class="zf-menu zf-menu1">招聘分类：</p>
<div>
<a href="" id="zf-classify-select">长期工</a>
<a href="">短期工</a>
<a href="">小时工</a>
<a href="">临时工</a>
</div>
</div>
<!--区域筛选-->
<div class="zf-screning">
<p class="zf-menu zf-menu2">区域筛选：</p>
<select id="s_province" name="s_province"></select>
<span>省</span>
<select id="s_city" name="s_city" ></select>
<span>市</span>
<select id="s_county" name="s_county"></select>
<span>区</span>
<script class="resources library" src="js/area.js" type="text/javascript"></script>
<script type="text/javascript">_init_area();</script>
</div>
<!--工种筛选-->
<div class="zf-work">
<div class="zf-work-top">
<p class="zf-menu zf-menu3">工种筛选:<span id="zf-work-sp">*最多只能选择4种工种</span></p>
<div id="selected">
<!--<a href='javascript:void(0);' id='selected0'><span class='fl'>保 洁</span><i></i></a>-->                                    	 
</div>
</div>
<div class="zf-work-main" id="items">
<a href="javascript:void(0);" id="items0">保 洁</a>
<a href="javascript:void(0);" id="items1">保安/安保</a>
<a href="javascript:void(0);" id="items2">美容/美发</a>
<a href="javascript:void(0);" id="items3">汽车维修</a>
<a href="javascript:void(0);" id="items4">普工/技工</a>
<a href="javascript:void(0);" id="items5">管理/研发</a>
<a href="javascript:void(0);" id="items6">物流/仓储</a>
<a href="javascript:void(0);" id="items7">服装/纺织</a>
<a href="javascript:void(0);" id="items8">电子/电气</a>
<a href="javascript:void(0);" id="items9">制药/生物</a>
<a href="javascript:void(0);" id="items10">环境建筑</a>
<a href="javascript:void(0);" id="items11">物业管理</a>
<a href="javascript:void(0);" id="items12">农林牧渔</a>
<a href="javascript:void(0);" id="items13">首 饰 品</a>
<a href="javascript:void(0);" id="items14">出纳/会计</a>
<a href="javascript:void(0);" id="items15">清洁/保洁</a>
<a href="javascript:void(0);" id="items16">快递人员</a>
<a href="javascript:void(0);" id="items17">物业管理</a>
<a href="javascript:void(0);" id="items18">装卸/搬运</a>
<a href="javascript:void(0);" id="items19">客服文职</a>
</div>
</div>
<a href="zp-result.html"  class="zf-btn">提交筛选</a>
<!---<button type="submit" class="zf-btn" >提交筛选</button>--->
</div>
<!--main end-->
</body>
</html>

三、注意事项：此处用到JQ的事件委托，引入jquery-1.8.min.js库的情况下这个方法live(type, [data], fn)才能正常使用，如果换成1.9版本的JQ库则无法使用.live()方法。

转载于:https://my.oschina.net/xiejunbo/blog/324412