动态绑定

最新推荐文章于 2023-04-10 21:52:09 发布

kuduschi

最新推荐文章于 2023-04-10 21:52:09 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/kuduschi/article/details/83626407

版权

在页面加载完成时的DOM元素，在绑定事件的时候可以通过

$(function () {
	绑定事件内容;
})

上述代码在处理页面加载完成之后的内容没有问题，在处理后续通过js动态生成的元素时则无法触发相应的事件，需要其他的方法进行绑定
1.在标签中绑定事件
2.用on方法进行动态绑定

利用on方法进行动态绑定

.on(events,[selector],[data],fn)

events:所绑定的事件类型
selector:所选择需要触发事件的元素
data:事件触发时处理函数。
fn:事件触发时执行的函数
实例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<p>1</p>
			<p>2</p>
			<p>3</p>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			$(function() {
				addjq();
			});

			var addjq = function() {
				//通过对需要绑定元素的父元素，在对相应的元素进行绑定
				$("div").on("click", "p", function() {
					$("<p>添加内容</p>").appendTo("div");
				});
				//直接对p标签进行绑定事件测试
				/*$("p").on("click", function() {
					$("<p>添加内容</p>").appendTo("div");

				});*/
			}
		</script>
	</body>

</html>

对已存在的三个元素依次进行点击出发事件，结果如下
在这里插入图片描述
对添加元素进行点击，结果如下

第一种方法能过对后续js添加的内容进行事件的绑定
第二种测试按上述测试步骤，结果如下图

后续添加内容无法触发事件，只有初始页面加载的三个标签能够触发事件