jquery and ajax tooltips don't work on live loaded content

Question

Hello Everyone,

I am using Ruby on Rails and Jquery as my library and 2 plugins but this should be a fairly plugin independent question.

I am using the jquery.pageLess plugin which makes an ajax call to the pagination that is built in to rails in order to load new items onto the page when you scroll to the bottom (much like the new google images layout).

However, I am also using the tipsy plugin to add tooltips to an image part of the link that is being loaded.

These tooltips work fine on the items which were not pageLessly loaded (which were already upon the originally loaded page) but do not show up on the items that were pageLess loaded. My guess is that pageLess makes a live, real time request to update the page but the tipsy tooltip plugin does not and therefore is not loaded on any of the new links that are returned by pageLess.

How can I make my jQuery functions work within the context of a live load/ajaxed content?

Answer 1

$('selector').tipsy({
  live: true
});

http://onehackoranother.com/projects/jquery/tipsy/

Support for Live Events
Live events are supported using the option {live: true}. jQuery ≥ 1.4.1 is required and live tooltips do not support manual triggering.

Edit
Another way would be to bind tipsy to the new elements after they've been created. Example:

$('selector').tipsy();

// post, get, ajax, etc
$.post(..., function(data) {
  // in the return function, first create the new elements
  ...

  // call on the tipsy method again
  // the selector will now also match the newly created elements
  $('selector').tipsy();
});

If you tipsy method has a lot of variables in it and you don't want to repeat it, it might be easier to create a separate function. Example:

// create the function 
function setupTipsy() {
  $('selector').tipsy({
    html: true,
    gravity: 'w',
    etc..
  });
}

// call on the function when the document has been loaded
setupTipsy();

// post, get, ajax, etc
$.post(..., function(data) {
  // in the return function, first create the new elements
  ...

  // call on the same function again
  setupTipsy();
});