Question

I’m rerendering part of a page which includes jQuery-ui tabs. After the rerender the tab headers are no longer bound to the event.

Can you initialise the tabs using delegate() or live() in the first place and avoid this issue or is it necessary to re-bind $(‘foo’).tabs() afterwards?

Answer 1

The short answer is yes, you must call $("foo").tabs() again after appending content you want to tabify.

However, there is a very good plugin called livequery that will actually accomplish what you’re after. With that plugin you can write code like this:

$(document).ready(function() {
    // When a new element with class "tabs" underneath the body element appears, apply the 
    // .tabs() function:

    $("body .tabs").livequery(function() {
        $(this).tabs();
    });
});

Example: http://jsfiddle.net/andrewwhitaker/vpnJt/

If you don’t want to use a plugin for this, I would move your initialization code for this type of thing into a function that you call in your AJAX success.