---恢复内容开始---
今天我们来说说关于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: 0; padding: 0 } 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; 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(0).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(0).off("click"); //你会发现现在可以移除掉第一个子元素的事件 //不能对未来元素实现绑定 var newli2 = $("<li>b未来元素</li>"); $(".ul_two").append(newli2) // 重要 重要 // 那为什么会造成这种情况呢 // 当我们在on函数的参数里面传入了子元素的参数 on的绑定机制类似于事件绑定，所以我们才不能移除某个子元素的事件，能对未来元素实现绑定 // 而当我们不传入子元素的参数，on的绑定机制相当于循环绑定，所以此时我们可以移除某个子元素的事件,但不能实现对未来元素实现绑定 </script>
---恢复内容结束---
---恢复内容结束---