取消绑定后如何将点击事件绑定到元素？

Question

我对 jquery 以及所有其他形式的网络编程都比较陌生。

我正在尝试构建主导航。将外部页面动态加载到单个 div 中的菜单，带有一些简单的过渡效果。

到目前为止，一切都运行良好，除了带有 .current 类的按钮即使在单击其他项目时仍保持非活动状态。

我希望在单击其他按钮后再次单击活动按钮。 因此，当时只有一个具有 .current 类的非活动项。

我尝试使用 .bind .unbind、.on .off、addAttr ... 没有结果。

jquery：

$(document).ready(function(){

    $('#pageWraper').css({'display':'none'}).slideDown('fast');

    $("a.menuLink").on("click", function(event) {
        var pageLink = $(this).attr('href');

        event.preventDefault();
         $(".currentPage").fadeOut('slow', function(){
             $("#pageWraper").load(pageLink);
         });

         $('#navigationWraper li a').removeClass('current');
         $(this).addClass('current').removeAttr('href').unbind('click');
    });
});

工作示例：

http://jsfiddle.net/gundra/GW8mb/1/

希望有一个简单的解决方案， 谢谢

Answer 1

无需解绑，只需在做任何事情之前检查current类即可

http://jsfiddle.net/GW8mb/5/

$(document).ready(function () {

    $('#pageWraper').css({
        'display': 'none'
    }).slideDown('fast');

    $("a.menuLink").on("click", function (event) {
        event.preventDefault();
        var $this = $(this);
        if (!$this.hasClass('current')) {
            var pageLink = $this.attr('href');

            $(".currentPage").fadeOut('slow', function () {
                $("#pageWraper").load(pageLink);
            });

            $('#navigationWraper li a').removeClass('current');
            $this.addClass('current');
        }
    });

});

Answer 2

这是你想要做的吗？只是突出显示活动的菜单项？

http://jsfiddle.net/GW8mb/3/

从那里只需使用 pageLink var 将任何内容加载到容器 div 中。

$('#navigationWraper li a').removeClass('current');
     $(this).addClass('current');