not understanding event-delegation with jquery ui tabs

Question

I'm just not getting event delegation with jquery ui tabs, or at all!

I got the code for jquery ui tabs and loading the pages with ajax working perfectly. However I'm having trouble understanding event-delegation. I load 4 tabs with external content, depending on the tab which is opened. Inside those tabs I would like to attach the same widgets to the input buttons and links. So far my code looks like this

JS for rest of page already loaded

$("button, input:submit, a", ".create_button").button();
 $("a.edit_button").button({
         icons: {primary: 'ui-icon-pencil'}
    });
   $("a.delete_button").button({
         icons: {primary: 'ui-icon-circle-close'}
    });
   $("a.active_button").button({
         icons: {primary: 'ui-icon-lightbulb'}
    });

JS For Tabs:

<script type="text/javascript">
         $(document).ready(function() {
          $("#tabs").tabs({
           ajaxOptions: {error: function(xhr, status, index, anchor) 
                                         {$(anchor.hash).html("Could not load");}},
           selected: 0})
         });
</script>

HTML

<div id="tabs">
  <ul>
    <li><a href="ajax_passes/member_id/9">Pass Information</a></li>
    <li><a href="ajax_entries/member_id/9">Entries</a></li>
    <li><a href="ajax_event/member_id/9">Event Administration</a></li>
    <li><a href="ajax_profile/member_id/9">Profile</a></li>
  </ul>
</div>

I've learned here on stack overflow that I have to attach a click event to my #tabs div with live(). Best guess anyway.

however I cannot find any examples that work for me and my limited understanding of event delegation.

Any help is appreciated. Rick

Answer 1

Right now, you have "error" being handled, but nothing else. You need to handle "success" or "complete"... actually, why are you using AJAX at all? You don't appear to be requesting any data from off of the page?

Answer 2

It seems like the key to your question is this:

Inside those tabs I would like to attach the same widgets to the input buttons and links.

Sounds like you want to use the "show" method of the tabs widget:

 $(document).ready(function() {
      $("#tabs").tabs({
       ajaxOptions: {error: function(xhr, status, index, anchor) 
                                     {$(anchor.hash).html("Could not load");}},
       selected: 0,
       show: function() {
         $([selectors for buttons or jQuery UI widgets in your tabs]).button();
       }
    })
 });

FWIW, this question is not really about event delegation. That article is useful in understanding the concept.

Answer 3

Turns out that .live() only works on events. So though I could bind something to the links, it would not actually take affect until the link has an event take place, i.e. click or hover.

A workaround would be to dynamically add events to the links with the loaded content, but that is quite tricky and adds a lot of overhead to the application. Instead I chose to style things within loaded content in a different way. In the process of learning about this, I did end up using live() for form submission and a reload of the content after the submission takes place.

Thanks guys for your help. RwL. You ended up not actually answering the question, but your prodding sent me in the right direction and I learned a lot. I was ultimately able to solve the problem myself. You know, give a man fish or teach him to fish, yadi yadi yadi...

Thanks!