Question

I’m trying to use jquery.qtip to an anchor element in jquery.datatables.

Basically how it works is that on the anchor elements, I put an tooltip=”tooltip desc” to anchor element.

And in js file, I put the following:

$('.simpletable a[tooltip]').each(function()

{

  $(this).qtip({

    content: $(this).attr('tooltip'),

    style: 'dark'

  });

});

It works for just regular datatables but when the source is an ajax, it stops working. I’m guessing it’s because qtip is bound to the anchor elements as soon as the dom is ready. However, at that time, ajax dom is not yet ready. Thus datatables with ajax source does not get get bound to the qtip.

Is there a way to fix this problem?
I’ve been trying to find a method to call the above js script after the ajax call is completed but I just can’t seem to find out how if it’s possible.

Thanks,

Frank

Answer 1

Use a future-proof binding observer such as live() or delegate(): “Attach a handler to the event for all elements which match the current selector, now and in the future.”

$('.simpletable a[tooltip]').each(function()
{
  $(this).live('qtip',function({
    content: $(this).attr('tooltip'),

    style: 'dark'

  });
});

http://api.jquery.com/live/