javascript - jquery bind事件的问题

Question

 我想点右边图标然后取消下面红框点的点击事件
 然后再点空白处就还原红框里的点击事件，为什么
 会没有反应，重绑不了了
/*******js*******/

//红框的绑定事件
$(".accessPage section>dl>dd li:nth-of-type(1)").bind("click",function(){
                    location.href="access_2.html";
});
$(".accessPage section>dl>dd li:nth-of-type(2)").bind("click",function(){
                    location.href="#";
});

//委托到document身上
$(document).delegate("span[class=tabsel]", "click", function(event) {
        event.stopPropagation();
        //点击取消事件绑定
        $(".tabsel").each(function() {
            $(".accessPage section>dl>dd li:nth-of-type(1)").unbind("click");
            $(".accessPage section>dl>dd li:nth-of-type(2)").unbind("click");
        });
        //点击空白处重新绑定
        $(document).click(function() {
            $(".accessPage section>dl>dd li:nth-of-type(1)").bind("click");
            $(".accessPage section>dl>dd li:nth-of-type(2)").bind("click");
        });
});

/*******html*******/
<section class="warp_1">
                <dl>
                    <dt>
                        <ol>
                            <li>DGD0000000001</li>
                            <li>大股东00012</li>
                            <li><span class="tabsel"></span></li>
                        </ol>
                    </dt>
                    <dd>
                        <ol>
                            <li><span>代理</span><span>2</span></li>
                            <li>客户</li>
                            <li>10</li>
                        </ol>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <ol>
                            <li>DGD0000000001</li>
                            <li>大股东00012</li>
                            <li><span class="tabsel"></span></li>
                        </ol>
                    </dt>
                    <dd>
                        <ol>
                            <li><span>代理</span><span>2</span></li>
                            <li>客户</li>
                            <li>10</li>
                        </ol>
                    </dd>
                </dl>
            </section>
            <footer>
                <ol>
                    <li>存取</li>
                    <li>对战设定</li>
                </ol>
            </footer>

Answer 1

bind函数是需要两个参数的，你的重新绑定的代码这样.bind("click");只有一个参数，肯定不行的。
建议两种修改方案：
1. 加个标志位就搞定了，不需要什么解绑定、重新绑定：

var enableClick = true;
//红框的绑定事件
$(".accessPage section>dl>dd li:nth-of-type(1)").bind("click",function(){
                    if (!enableClick) return;
                    location.href="access_2.html";
});
$(".accessPage section>dl>dd li:nth-of-type(2)").bind("click",function(){
                    if (!enableClick) return;
                    location.href="#";
});

//委托到document身上
$(document).delegate("span[class=tabsel]", "click", function(event) {
        event.stopPropagation();
        // 禁用点击
        enableClick = false;
        // 启动点击
        $(document).click(function() {
             enableClick = true;
        });
});

1. 将绑定的代码稍微提取个函数：

//红框的绑定事件
function bindSomething(){
    $(".accessPage section>dl>dd li:nth-of-type(1)").bind("click",function(){
                        location.href="access_2.html";
    });
    $(".accessPage section>dl>dd li:nth-of-type(2)").bind("click",function(){
                        location.href="#";
    });
}
bindSomething();
//委托到document身上
$(document).delegate("span[class=tabsel]", "click", function(event) {
        event.stopPropagation();
        //点击取消事件绑定
        $(".tabsel").each(function() {
            $(".accessPage section>dl>dd li:nth-of-type(1)").unbind("click");
            $(".accessPage section>dl>dd li:nth-of-type(2)").unbind("click");
        });
        //点击空白处重新绑定
        $(document).click(function() {
            bindSomething();
        });
});

Answer 2

http://codepen.io/lishengzxc/pen/jPLdPm