Question

I want to use the .tabs effect (customised a little) on some append() -ed HTML like this:

$(document).ready(function(){
  $.get('/featured-slider.php', function(data) {
    $('#wrapper').append(data);
  });

  $('#featured-slider').tabs({fx:{opacity: 
       "toggle"}}).tabs("rotate", 5000, true);
});

If the contents of featured-slider.php are already in the file (that is to say I do not .get() at all) the tabs effect works great. However, if I try to append() the HTML (like the code above) it does not work.

Does anyone know how to make it work?

Answer 1

Try moving your .tabs invocation to the .get callback:

$(document).ready(function(){
    $.get('/featured-slider.php', function(data) {
        $('#wrapper').append(data);
        $('#featured-slider').tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
    });
});