title: JQuery UI Tabs - rebinding events for tabs loaded via ajax
body: <p>Is there a proper way to rebind events in JQuery UI when tabs are loaded via ajax.  For example, in the code below, I have the success event call an 'initBinding()' function which sets up some custom click event handlers for different classes.  The problem with this is, when I switch tabs a bunch of times, then fire off one of the click events, I get some weird screen flicker effects.  If I refresh the entire page, then go directly to the click event, it doesn't flicker.  So I think it has something to do with it binding multiple times.</p>
  
  <p>If I take the 'initBinding()' method out of the success event, any tab that gets loaded via ajax will not trigger any of the events I have setup.  Is there a standard/better way to do handling binding events like this?</p>
  
  <pre><code>$(document).ready(function () {
      $("#tabs").tabs({
          select: function (event, ui) {
              var tabID = "#ui-tabs-" + (ui.index + 1);
              $(tabID).html("&lt;b&gt;Fetching Data....Please wait....&lt;/b&gt;");
          },
          ajaxOptions: {
              error: function (xhr, status, index, anchor) {
                  $(anchor.hash).html("Could not load tab data");
              },
              success: function (xhr, status, index, anchor) {
                  initBinding();
              }
          }
      });
  });
  function initBinding() {
      $(".editButton").click(function () {
          //event logic...
      });
  }
  </code></pre>