toggle() 只执行一次 下次要执行要点两次

Question

为了美化 select下拉框 用的是ul li代替的 具体html代码如下：

上面的代码 需要一个弹出层触发才会出来的 然后通过点击div的 select-title 来让下面的ul显示出来 具体的 js代码如下：select方法 是触发点击显示隐藏的

$(document).on('click','.addinfo,.add',function(){
    $('.select-title span').attr('data-val',$(this).siblings('.edit').attr('val'));
    $('.select-title span').text($(this).attr('txt'));
    layer.open({         area: ['60%', '80%'],          type: 1,          title: false,    
          shift: 2,          content: $('#add')
        });
    select();
});function select(){
    $(".select-title").on("click",function(){
        $(".select-list").toggle();        return false;
    });
}

不知道怎么回事 第一次在这个弹出层里点击正常出来 把弹出层关闭之后再打开弹出层 第二次点击点不动 再关闭打开 第三次又能出来了

Answer 1

你在每次打开layer的时候都调用了select()方法，方法中重新绑定了click事件$(".select-list").toggle();（个人见解，没看过jquery的事件实现方式，不过查了下button的确绑定了多个事件）重复绑定了事件，也就说执行了一次隐藏和现实的toggle方法，所以等于无效。第三次点击就等于绑了三个事件