JQuery创建元素+事件委托

最新推荐文章于 2022-10-12 09:05:58 发布

小陈子丶

最新推荐文章于 2022-10-12 09:05:58 发布

阅读量95

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44754886/article/details/115969667

版权

通过JQuery创建元素+事件委托

事件委托(比往常多了’.a1’)：.on(‘click’,’.a1’,function(){}

<style>
	a{
		text-decoration: none;
	}
</style>

<body>
	班级名称：<input /><input type="button" value="+" id="btn1" /><br />
	<div id="div1">
	<!-- <input placeholder="学生姓名" /><input placeholder="学生年龄" /><input 		placeholder="学生性别" /> -->
	</div>
</body>

<script src="js/JQuery/jquery-3.4.1.js"></script>
<script>
	$(document).ready(function(){
		// 通过事件委托的方式完成<a class='a1'> 绑定点击事件
		// 比往常多了'.a1'
		$('#div1').off('click').on('click','.a1',function(){
		//console.log('a1绑定了点击事件');
		console.log($(this));
		var span = $(this).closest('span');
		//console.log(span);
		// 将span删除
		span.remove();
		return false;
	});
	// on 绑定事件 off 解除事件
	// 为了防止事件重复绑定，再绑定事件之前，先尝试off一下。
			
	$('#btn1').on('click',function(){			
		//$('#div1').append('<input placeholder="学生姓名" /><input placeholder="学生年龄" /><input placeholder="学生性别" /><br/>');
		// 通过JQuery创建元素
		var input1 = $("<input />").attr('placeholder','学生姓名')
		var input2 = $('<input />').attr('placeholder','学生年龄');
		var select1 = $('<select><option>男</option><option>女</option></select>');
		var select = $('<select/>').append($('<option/>').text('男')).append($('<option/>').text('女'));
		var a = $('<a href="" class="a1"></a>').text('-');
		var span1 = $('<span />').append(input1).append(input2).append(select).append(a).append('<br />');
				$('#div1').append(span1);
		});
		
	});
</script>