动态绑定与静态绑定的区别图示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态绑定与静态绑定的区别</title>
<script src="js/jquery.min.js"></script>
<style>
.change{
background: red;
}
</style>
</head>
<body>
<div>
<p>初始内容1</p>
<p>初始内容2</p>
<p>初始内容3</p>
</div>
</body>
<script>
$(function(){
// jing();
dong();
});
function jing(){
$("p").on("click",function(){
$("div").append("<p>生成的内容</p>")
$(this).addClass("change");
})
}
function dong(){
$("div").on("click","p",function(){
$("div").append("<p>生成的内容</p>")
$(this).addClass("change");
})
}
</script>
</html>
- 静态绑定效果
- 动态绑定效果
- 上面两张图表明了，静态绑定只有当点击初始的p标签时才能够触发事件
- 但是动态绑定后，之后生成的p标签点击也能触发事件效果
- 两者在写法上有着很大的区别
- 1.静态绑定是选择了当前的p标签，也就是三个初始的p标签
- 2.而动态绑定相当于选中了p标签的父元素div下的所有的p标签，当然也包括了之后生成的p标签
618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
