Question

I have multiple clicks, that I have to unbind once clicked on, but I need to rebind the button for the links.

Here is an example :

$('.001').click(function(){
      jQuery(this).unbind('click');
      jQuery('.hide').hide();
      jQuery('.show').show();
      jQuery(this).find('.show').hide();
      jQuery(this).find('.hide').load('pages/001.html');
      jQuery(this).find('.hide').show();

    }); 

    $('.002').click(function(){
      jQuery(this).unbind('click');
      jQuery('.hide').hide();
      jQuery('.show').show();
      jQuery(this).find('.show').hide();
      jQuery(this).find('.hide').load('pages/002.html');
      jQuery(this).find('.hide').show();
    });

So when I click on .001 it loads a page with a different jQuery action in it (a slider), so I must unbind the click on .001 (hence the jQuery(this).unbind(‘click’);), BUT when I click on .002 I must rebind the .click on .001. This must be done with vars because this can go from 001 to 999.

Any tips ?

Answer 1

You don’t need to bind and rebind handlers again and again. Just store the identifier of the activated item somewhere, then check for it in each click handler. Like this:

var active;
$('.some_class').click(function() {
  if (this.className === active) {
    return false;
  }
  active = this.className;
  ...
});

Also, I’d highly recommend assigning one and only one function as event handler for all the items in question, forking its actions based on external attribute. Like this:

<a class="first" data-url-to-go="/first.html">Some Link</a>
<a class="second" data-url-to-go="/second.html">Some Other Link</a>
...
var active;
$('.first, .second').click(function() {
  if (this.className === active) {
    return false; 
  }
  active = this.className;
  var $this = $(this), 
      url = $this.data('urlToGo');
  ...
});

Here’s a JS Fiddle that illustrates this concept.