jquery学习笔记之动态添加元素绑定事件

最新推荐文章于 2022-10-29 21:13:49 发布

原创最新推荐文章于 2022-10-29 21:13:49 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jquery 专栏收录该内容

1 篇文章

订阅专栏

博客记录了使用jQuery在项目中动态添加元素并绑定事件的技巧。通过示例展示了如何正确实现动态元素的事件监听，强调了使用$(document).on()方法的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天做项目涉及到页面上的设计，用到一些jquery，记录一下学习的成果。都是一些小的零散的知识点，大神不要见笑。

1.jquery动态添加元素时需要绑定事件。demo如下：

没有绑定事件时：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
	<script src="js/jquery.js"></script>
	<script>
		$(document).ready(function(){
			$("#addBtn").click(function(){
				//点击之后在content DIV中添加一个如下的DIV
				//这里是追加，用append(),不能用html();
				//选取当前元素的父元素，append（）
				//这里当然可以用$("#content"),复习一下jquery的遍历
				$(this).parent().append('<div><input type="text"/><button class="delBtn">删除</button></div>');
			});
			//点击删除按钮后，删除其存在的div
			$(".delBtn").click(function(){
				$(this).parent().remove();
			});
		});
	</script>
  <title>jquery动态添加元素需要绑定事件</title>
 </head>
 <body>
  <div id="content">
	<button id="addBtn">添加一行</button>
	<div><input type="text"/><button class="delBtn">删除</button></div>
  </div>
 </body>
</html>

这样写看起来没有什么问题，但是写好之后却发现，只有一开始就在页面上写上去的DIV里面的button事件可以执行，其他的通过添加按钮添加上去的都不能删除。

接下来我换一种写法，也就是所谓的绑定事件

<script>
		//动态添加事件
		$(document).on("click",".delBtn",function(){
				$(this).parent().remove();
		});
		$(document).ready(function(){
			$("#addBtn").click(function(){
				//点击之后在content DIV中添加一个如下的DIV
				//这里是追加，用append(),不能用html();
				//选取当前元素的父元素，append（）
				//这里当然可以用$("#content"),复习一下jquery的遍历
				$(this).parent().append('<div><input type="text"/><button class="delBtn">删除</button></div>');
			});
			//点击删除按钮后，删除其存在的div
			/*$(".delBtn").click(function(){
				$(this).parent().remove();
			});*/
		});
	</script>

这种写法，就能很好的解决这个问题了。

$(document).on("事件名","类名或其他",function(){});