文档章节

JQuery事件委托机制实现案例

xiejunbo
 xiejunbo
发布于 2014/10/05 15:57
字数 855
阅读 55
收藏 0

一、效果图展示

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

二、源代码:

<!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()方法。






© 著作权归作者所有

xiejunbo
粉丝 46
博文 149
码字总数 133634
作品 0
广州
后端工程师
私信 提问
jquery live() delegate() on() 事件委托的一些区别

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委...

rikkilovelife
2015/03/20
7.7K
0
jQuery源码剖析(五) - 事件绑定原理剖析

jQuery 源码解析代码及更多学习干货:猛戳GitHub 本篇代码为 my-jQuery 1.0.5.js 一、基础知识 1.DOM 0级事件模型: 通过JS指定事件处理程序传统方式,就是将一个函数赋值为一个事件处理程序属性...

极客James
07/27
0
0
通过发布订阅模式实现的事件委托

关于这篇文章的背景 之前了解到的事件代理不多,就像是一个dom将事件委托给另一个dom,又叫事件委托。后来做了个题目,要实现一个类似jquery的事件委托方法,然后认真的了解了一下。然后专注...

爱吃喵的鱼
2018/11/25
0
0
JQuery常用功能的性能优化

使用最佳选择器 通常比较常用的选择器有以下几个: 1.ID选择器 $("#id") 2.标签选择器 $("td") 3.类选择器 $(".target") 4.属性选择器 $("td[target='target']") 5.伪类选择器 $("td:hidden......

Liebert
2014/03/24
92
0
jQuery学习四 事件与事件对象

一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. .事件与事件对象 首先看一下我们经常使用的添加事件的方式: <!D...

天行健J
2012/12/10
118
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
今天
7
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部