.on事件绑定多少次就会执行多少次

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>The Earth</title>
 6     <link rel="shortcut icon" href="img/earth.ico" type="image/x-icon">
 7     <link rel="icon" href="img/earth.ico" type="image/x-icon">
 8     <script src="js/lib/zepto.js"></script>
 9     <script src="js/index.js"></script>
10 </head>
11 <body>
12         <button type="button" class="btn1">点击1</button><!--先点击点击btn1 3次-->
13         <button type="button" class="btn2">点击2</button><!--再点击点击btn2 1次-->
14 </body>
15 <script>
16    Zepto(function($){
17         $(".btn1").click(function(){
18             $(".btn2").on("click",function(){
19                 console.log(123);//将会执行3次,因为被绑定了三次(.on绑定多少次就执行多少次)
20             })
21         })
22     })
23 </script>
24 </html>

解决方法(.on不管绑定多少次只会执行一次---无需点击btn1再绑定,每次点击btn2就执行一次)

 1 $(".btn1").click(function(){
 2             $(".btn2").off("click").on("click",function(){
 3                 //off() 方法用于移除通过on()方法添加的事件处理程序
 4                 // (每次向.btn2上绑定click事件时，先将btn2上的click事件移除，再绑定，再点击时就只会有一次绑定)
 5                 console.log(123);
 6             })
 7         })
 8         $(".btn1").click(function(){
 9             $(".btn2").unbind("click");
10             $(".btn2").on("click",function(){
11                 console.log(123);
12             })
13         })

解决方法(.on不管绑定多少次只会执行一次---需点击btn1再绑定,才能点击btn2就执行一次)

 1 Zepto(function($){
 2         $(".btn1").click(function(){
 3             $(".btn2").on("click",function(){
 4                 console.log(123);
 5                 $(".btn2").off("click")
 6                 //off() 方法用于移除通过on()方法添加的事件处理程序
 7                 // (每次向.btn2上绑定click事件后，将btn2上的click事件移除,btn2上将没有点击事件，
 8                 // 需要在点击btn1去向btn2绑定click事件，btn2才能在点击)
 9             })
10         })
11         $(".btn1").click(function(){
12             $(".btn2").on("click",function(){
13                 console.log(123);
14                 $(".btn2").unbind("click");
15             })
16         })
17     })