---恢复内容开始---
今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题，直接上代码了，大家拷下去就可以用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: ;
padding:
} li {
list-style: none
} .ul_one,
.ul_two {
overflow: hidden;
float: left;
margin-left: 400px;
margin-top: 200px;
} .ul_one>li,
.ul_two>li {
text-align: center;
height: 40px;
width: 120px;
background-color: yellow;
border: 1px solid gray;
line-height: 40px;
} .ul_two>li {
background-color: green;
}
p{color: green;font-size: 20px;clear:both;margin-left: 300px;margin-top: 20px}
</style>
</head> <body>
<ul class="ul_one">
<li>a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul> <ul class="ul_two">
<li>b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
<p>当我们在on函数的参数里面传入了子元素的参数 on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件</p>
<p>而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件</p>
<p>注意：需要引入JQuery,打开控制台看输出，打开源码看注释</p>
</body> </html>
<script src="jquery-1.11.3.js"></script>
<script>
//JQuery中on绑定的一些小坑
// 然后用on来对两个ul进行绑定 // 这种方法将第二个参数填入 即将子元素参数填入
$(".ul_one").on("click", "li", function () {
console.log(this)
//可以看到事件已经绑定上
})
//现在尝试给第一个子元素移除事件
$(".ul_one").children().eq().off("click");
// 你会发现根本移除不掉 // 可以对未来元素实现绑定
var newli1 = $("<li>a未来元素</li>");
$(".ul_one").append(newli1) // 由于on的第二个参数是可选参数我们来试试换种写法
$(".ul_two>li").on("click", function () {
console.log(this)
})
// 来，我们现在移除某个子元素的事件
$(".ul_two").children().eq().off("click");
//你会发现现在可以移除掉第一个子元素的事件 //不能对未来元素实现绑定
var newli2 = $("<li>b未来元素</li>");
$(".ul_two").append(newli2) // 重要 重要
// 那为什么会造成这种情况呢 // 当我们在on函数的参数里面传入了子元素的参数 on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件，能对未来元素实现绑定 // 而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件,但不能实现对未来元素实现绑定
</script>
---恢复内容结束---
---恢复内容结束---