jquery - 取消绑定一个 div，然后再绑定它

Question

$('.tab').click(function() {
    $(this).unbind("click");
    var classy = $(this).attr("class").split(" ").splice(-1);
    var ihtml = $('.content.'+classy).html();
    $('#holder').html(ihtml);
    $('.tab').removeClass('highlight');
    $(this).addClass('highlight');
    $(this).unbind("click");
});

所以在这段代码中，我基本上有一个选项卡式界面。当我再次单击选项卡时，#holder 中的信息消失了。所以我想做的是每当用户点击选项卡时取消绑定点击，然后在他们切换选项卡时绑定它。如何将其集成到我的代码中？

谢谢。

Answer 1

您可以尝试在单击选项卡时添加一个“活动”类（通常是很好的做法），然后使用 jQuerylive()做一些花哨的事情......

$('.tab:not(.active)').live('click', function () { 
    $('.tab').removeClass('active');
    $(this).addClass('active');
    ... 
});

我想这可以解决问题。

Answer 2

另外，您可以尝试使用这种语法（应该更快，对内存和 CPU 更友好）：

$('.tab').click(function () {
    var t = $(this);
    if (t.hasClass('active')) { return false; }
    $('.active').removeClass('active');
    t.addClass('active');
    /* do some stuff here */
    return false;
});

或者更好的是，为了避免重复自己：

$('.tab').click(function () {
    var t = $(this);
    if (!t.hasClass('active')) {
        $('.active').removeClass('active');
        t.addClass('active');
        /* do some stuff here */
    }
    return false;
});

为什么这更快且 cpu 友好？因为你只绑定一次。当你使用livebind 方法时，浏览器会监听 DOM 中的任何变化。