JQueryTools live?

Question

I´m using JQuery Tools http://flowplayer.org/tools/ in one big project.

The issues is: When I load a page using ajax all this JQuery Tools stuff stop working. I know I have to re-bind the events or use jQuery.Live but I don´t know how to do this with JQuery Tools.

I need methods like

$(".element").overlay(...)
$(".element").tabs(...)

workin live after using jQuery.load() (Ajax)

Anybody know how to do this please?

Here the update with the ajax and live code:

$(".commentlist h3 a").click( function () {
  $('#container').html('loading').load('test.php #business-wrapper', function() {
     alert('Load was performed.');
  });
  return false;
});

The test.php contain this tabs and 'load' event does not work with ajax an without ajax does not work either

$("ul.tabs").live('load', function() {
  $(this).tabs("div.panes > div", { effect: 'fade', current: 'active', tabs: 'li' }); 
})

Thanks.

Answer 1

You have the load event for this:

$.live('load', function(event) {
  $(this).overlay();
});

Answer 2

If you are replacing your elements, then you need to re-run that code on them in your ajax success or complete function. Here's an example making it into a function (you could duplicate it, this is to keep it tidy/easy to maintain):

function setupStuff(context) {
  $(".element", context).overlay(...)
  $(".element", context).tabs(...)
}

$.ajax({
   //Stuff...
   success: function(data) {
     //Stuff with results...
     setupStuff(data);
   }
});

In document.ready call it initially:

$(function() {
  setupStuff(document);
});

Answer 3

anyone solve this? I am encountering similar issue trying to get jquerytools overlay to reinitialize after ajax content has been inserted into the DOM.