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

Question

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

<div id='add' style='display:none'>
<div class="select-wrap">
            <div class="select-title ue-clear"><span data-val="23">再来顶级栏目</span><i class="icon"></i></div>
            <ul class="select-list" style="display: none;">
            <li data-val="0">顶级分类</li>
                            <li data-val="11">&nbsp;&nbsp;新闻资讯</li>
                             <li data-val="12">&nbsp;&nbsp;&nbsp;&nbsp;企业新闻</li>
                             <li data-val="13">&nbsp;&nbsp;&nbsp;&nbsp;行业资讯</li>
                             <li data-val="17">&nbsp;&nbsp;&nbsp;&nbsp;产品问答</li>
                             <li data-val="19">&nbsp;&nbsp;&nbsp;&nbsp;测试二级栏目</li>
                             <li data-val="18">&nbsp;&nbsp;测试顶级栏目</li>
                             <li data-val="23">&nbsp;&nbsp;再来顶级栏目</li>
                             <li data-val="21">&nbsp;&nbsp;&nbsp;&nbsp;顶级二级栏目</li>
                             <li data-val="24">&nbsp;&nbsp;&nbsp;&nbsp;111</li>
                             <li data-val="25">&nbsp;&nbsp;&nbsp;&nbsp;222</li>
                             <li data-val="26">&nbsp;&nbsp;&nbsp;&nbsp;dwz</li>
                             <li data-val="28">&nbsp;&nbsp;&nbsp;&nbsp;再来二级的</li>
                             <li data-val="27">&nbsp;&nbsp;二次二级栏目</li>
               
            </ul>
        </div>
 </div>       

上面的代码 需要一个弹出层触发才会出来的 然后通过点击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方法，所以等于无效。第三次点击就等于绑了三个事件

Answer 2

是因为你绑定了两次 。

这是实际开发中经常出现的bug.

你每次绑定的时候 先把这个事件off()掉就可以解决了