绑定事件触发时执行了多次

Question

我写了如下的代码:

function wrap(){
           $('.major').on('click',function(){
                    alert('1');
           });
};
$('#btn').on('click',wrap);

想实现当点击#btn按钮然后再点击.major时弹出1,但是这样写后,当多次点击#btn按钮然后再点击.major后会弹出多次1,请问这是怎么回事?难道通过on绑定多次,触发的时候就会执行多次吗?
那我该如何改进呢?

Answer 1

这是因为你每点击一次#btn就为.major绑定了一次click事件

用object.onclick=function(){};这种格式只执行最后一次绑定

Answer 2

那你就不该用on，该用once

function wrap(){
    $('.major').once('click',function(){
        alert('1');
    });
};
$('#btn').on('click',wrap);

还有你那个代码贴的那叫一难看，提问时注意下格式。你提的漂亮、干净，别人回答的也会快点(不用脑补代码正确格式了)

Answer 3

btn是在major里面吗？如果是，由于事件冒泡，major也会触发点击事件，需要阻止事件冒泡。

Answer 4

是的，你已經回答了你的問題了，當你每執行一次 wrap 就等於再次綁定一個 click 事件，並不是說清掉之前的在綁定。

可以先清除綁定，這樣就不會綁定多次了。

function wrap(){
  var onClick = function() {
        alert('1');
  }
  $('.major').off('click').on('click', onClick);
};

$('#btn').on('click', wrap);

Answer 5

你这样写点击此#btn就会绑定几次.major，正确写法应该要定义一个控制器

      var con = false;
      $('#btn').on('click',function(){
        con = true;
      })
      $('.major').on('click',function(){
            if(con){
                alert(1);
                con = false;
            }
       })

Answer 6

unbind('click')

Answer 7

加个状态判断：

var hasWrap = false;
function wrap(){

hasWrap = true;       

};
$('.major').on('click',function(){

if(hasWrap)alert('1');

});
$('#btn').on('click',wrap);