How do I get jcarousellite to bind after JS inserts DOM elements?

I am using jcarousellite on one of my projects. This is the code I have so far.

$(".carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    speed: 700,
    visible: 8,
    afterEnd: function(a){
        // set the now first element to the active video
        $(a[0]).addClass("active");
    },
});

Only problem is that my list items have not been generated until

$(document).ready(function(){
  // generate list items
});

I would like to generate my carousel after the list items have been loaded. Can I use jQuery's .live() for this? Any ideas?

Don't run the carousel plugin until after your items have been generated.

$(document).ready(function(){

  // generate list items

  // then run the jCarouselLite
  $(".carousel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    speed: 700,
    visible: 8,
    afterEnd: function(a){
        // set the now first element to the active video
        $(a[0]).addClass("active");
    },
  });

});

If the list items are being generated as a result of an asynchronous AJAX call, then put the carousel code in the callback to the AJAX call.

If you're generating additional items dynamically, then store a reference to the list in a variable, and call the carousel plugin against just those items.

And no, you can't use .live() for this.