title: jQuery tabs - why are requests multiplying?
body: <p>Let's say I have a jQuery UI tab (ajax loaded), defined to call page abc.html. On that page I call another page, let's say def.html. In my jQuery tab definition I have defined that links within tabs should be opened within tabs, this is the definition:</p>
  
  <pre><code>$(document).ready(function() {
      $("#tabs").tabs({
          select: function(event, ui) {
              $(ui.panel).undelegate('a', 'click');
          },
          load: function(event, ui) {
              $(ui.panel).delegate('a', 'click', function() {
                  $(ui.panel).load(this.href);
                  return false;
              });
          }
  
      });
  });
  </code></pre>
  
  <p>Ok so this works fine when going back and forth between links in a tab. However, on my page def.html I have a button that I want to use to load the initial tab. This is how I do it:</p>
  
  <pre><code>$("#cancelButton").click(function(event){
      event.preventDefault();
      $("#tabs").tabs('load', $("#tabs").tabs('option', 'selected'));
  });
  </code></pre>
  
  <p>This calls my initial abc.html just fine. Problem is, when I call the link to def.html again from my newly loaded abc.html, request for def.html happens twice. I click on my cancelButton again, it redirects to abc.html, I click on def.html again and now my request is called three times and so on.</p>
  
  <p>I'm guessing something somewhere gets bound multiple times, but does not get unbound. Any help would do, thanks.</p>