另一个绑定事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 400px;
height: 200px;
background-color: green;
}
p {
width: 100px;
height: 20px;
background-color: red;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 点击按钮为div绑定事件
// 此时on和delegate的作用是一样的,但是参数的顺序是一样的
$("#btn").click(function(){
$("<p>这是一个p</p>").appendTo($("#dv"));
// 和delegate是一样的,都是在为子元素绑定事件
$("#dv").on("click","p",function(){
alert("p被点击了");
});
});
$("#btn2").click(function(){
$("<p>这是一个p2</p>").appendTo($("#dv"));
});
});
</script>
</head>
<body>
<input type="button" value="绑定事件" id="btn">
<input type="button" value="绑定事件" id="btn2">
<div id="dv"></div>
</body>
</html>为元素绑定事件的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
/**
* 对象.事件名字(事件处理函数);---->普通的写法
* 对象.bind(参数1,参数2);---->参数1:事件的名字,参数2:事件处理函数
* 前两种方式只能为存在的元素绑定事件,后添加的事件没有事件
*
* 下面的两种方式,可以为存在的元素绑定事件,后添加的元素也有事件
* 对象.delegate("选择器","事件名字",事件处理函数);
* 父级元素调用方法,代理子级元素绑定事件
* 对象.on("事件名字","选择器",事件处理函数);
* 父级元素调用方法,代理子级元素绑定事件
*
* 因为delegate方法中调用的on的方法
* 所以,以后直接用on就可以了
*/
</script>
</head>
<body>
</body>
</html>