jQuery unbind/disable navigation link

Hy,

a really stupid problem, but i cant get it to work:

I have some function that binds the click of my navigation. When a link is clicker it gets the class "active". So my idea was that i just say:

<a id="link1" class="main">link1</a>
<a id="link2" class="main">link2</a>
<a id="link3" class="main">link3</a>

$('a.main').bind('click', function(){
$(this).removeClass('active');
//some code
$(this).addClass('active');
}

So far thats working. My element gets the active class when it´s hit and removes when another has been clicked. My idea now was just simple unbind all active links (otherwise some double reloading happends by paranoid 10000 clicks on my navigation =)

§('a.active').unbind('click');

I also specify for each element in my navigation a special event:

$('a#link1').bind('click', function() {
$img.fadeOut('slow', function() {
      $('#bg div table tr td').addClass('loading');
        $img.attr('src', 'images/image.jpg');
     });
});

Now what happends is, that if i click an element in my navigation (accordion), the thing slides down, gets the active class (still keeps the main class):

<a id="link1" class="main active">link1</a>

When i click another element in the navigation, this one closes and the active class is removed.

BUT when i go back to 开发者_StackOverflow社区that link before, it´s nnot clickable anymore? So, i guess jQuery unbinds the click event for ever from an element that has been active. Sounds a bit stupid and unlogic to me...

Maybe is there a way to enable/disabel these. So a function that checks if the element has an active class it should be disabled. Or is the problem the "main" class beside the "active" class...

Any idea?

---

You can namespace event handlers, so you can easily unbind them without affecting other handlers of the same type attached to the same elements:

$('a.main').bind('click.activeState', function() {
    ...
});


$('a.active').unbind('click.activeState');


// and instead of binding several times, you can use attributeStartswith
$('a[id^=link]').bind('click.animation', function() {
    ...
});

Take a look at the 'Using Namespaces' subsections of .bind and .unbind.

---

I think you're not understand how jQuery event binding works. Your question isn't very clear and there are some wrong assertions/assumptions in there. Or maybe I'm just not understand the question :)

Anyway, if you're just trying to stop repeat clicks, I'd go for something like

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

    // ...do whatever here
});

Demo here.