【学习笔记三】- 动态添加元素绑定事件函数测试

最新推荐文章于 2020-06-27 16:52:35 发布

Jiuto_crx

最新推荐文章于 2020-06-27 16:52:35 发布

阅读量294

点赞数

文章标签：前端动态添加元素绑定事件

本文链接：https://blog.csdn.net/Jiuto_crx/article/details/77722695

版权

写在前面：

这是昨天校招参加一个笔试的时候遇到的题，百度了一下之后自己写了一个简单的测试。

首先简单说一下动态添加，因为楼主智障，开始的时候没有通过button按钮绑定click事件，直接在js中用三种方法添加了三个<li>，结果不论用什么方法绑定都能成功，一下脑子没转过来顿时就懵逼了。

所以我理解的动态应该是通过用户操作添加的元素，而不是一开始页面加载完就有的。

然后是绑定方法，现在通过jQuery添加元素的方法大致如下：

1、不能绑定动态添加的元素的方法

$('...').click(function(event){

if($(event.target).is('a')){alert($(this).text())}
})

或

$('...').bind(event,function(){})
2、可以给动态添加的元素绑定事件的方法：

据说不同jQuery版本的使用方法情况是这样

Query 1.3-1.4.2 用.live('click',func)
1.4.2-1.7 用.delegate（'li','click',func）

1.7后用.on('click','li',func)

我没有去下之前的版本测试，自己用的是3.2.1，就直接用的on方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绑定动态添加元素</title>
	<script type="text/javascript" src="../jquery-3.2.1.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$('#btn').click(function appendLi(){
			//以html创建新元素
			var lic='<li id="c">something3</li>';
			//用jQuery创建新元素
			var lid=$('<li id="d">something4</li>');
			//用DOM创建新元素
			var lie=document.createElement('li');
			var text=document.createTextNode('something5');
			lie.setAttribute('id','e');
			lie.appendChild(text);
			//添加元素
			$('ul').append(lic,lid,lie);
		});
			$('#c').click(function(){  
			    alert( $(this).text() );  
			});  //id为c的li未绑定成功
			
			$('ul').on('click','#d',function(){  
			    alert( $(this).text() );  
			});  //id为d的li绑定成功

			$('li').bind('mouseover',function(event) {
				$(this).css('color','#ccc')
			});	//动态添加的cde未绑定成功，原有的ab绑定成功

			$('li').mouseleave(function(event) {
				$(this).css('color','black')
			});	//动态添加的cde未绑定成功，原有的ab绑定成功
	});
	</script>
</head>
<body>
	<div id='test'>
		<ul>
			<li id='a'>something1</li>
			<li id='b'>something2</li>
		</ul>
	</div>
	<button id='btn'>add li</button>
</body>
</html>动态添加的cde未绑定成功，原有的ab绑定成功
	});
	</script>
</head>
<body>
	<div id='test'>
		<ul>
			<li id='a'>something1</li>
			<li id='b'>something2</li>
		</ul>
	</div>
	<button id='btn'>add li</button>
</body>
</html>