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 })