[jquery] Adding a live() function to the .jcarousel method

Question

Hi guys, Im trying to implement jcarousel on my site. And the default way of doing that only works on data that is already there when the DOM is ready.

In my case, im trying to add jcarousel on the result set (ul and li's) coming from my search box, which are added dynamically using AJAX. Which means it has to be added to live() in some way or the other for it to work(i think). I've been trying to add it, in different ways, but none have worked.

live() is used for events, which jcarousel isn't. Ive tried alot, before ending up here. Heres a couple of my tries on hxxp://jsfiddle.net/pcjUZ/15/

// the default way of adding it
$('#results').jcarousel({
    // Configuration goes here
    vertical: true,
    scroll: 2
});

// my way of trying to get it live() 
// (which works on elements now and the ones added in the future)
// but mine doesnt work at all :/
$('#results').live("load", function(){
    $(this).jcarousel({
        // Configuration goes here
        vertical: true,
        scroll: 2
    });
});

I would really appreciate it, if anyone could help me out! Thanks in advance.

Answer 1

Why don't you try this: Carousel with dynamic content loading via Ajax

View source on that page to get insight on how to do jCarousel on dynamic content loaded by Ajax.

But if it is not a ajax request for this jCarousel alone, then I would probably attach the jcarousel plugin on the .ajaxComplete() event handler rather than the document.ready() as it is done normally.

Hope that helps