Jquery Cycle Lite plugin unable to see images that have been loaded by an AJAX call

Posted by William Macdonald on Stack Overflow See other posts from Stack Overflow or by William Macdonald
Published on 2010-05-25T10:56:03Z Indexed on 2010/05/25 11:01 UTC
Read the original article Hit count: 302

Filed under:
|
|

Hi,

I am having problems using the jquery cycle lite plugin on some images that are added via AJAX.

Here is the jquery code:

$(function() {
                resizeWindow();
                $(window).bind("resize", resizeWindow);    

                $("#assignment-nav").accordion({
                    header: "h3",
                    autoHeight: false
                });

                $(".project").click(function() { // get the HTML and load into div
                    $('.image-holder').empty();
                    var justTheNumber = $(this).attr('id').replace('project-','');
                    $.get("get_project_images.php",
                        {project_id:justTheNumber},
                        function(data){
                            $('.image-holder').append(data);
                        }                           
                    );

                    $(".image-holder").cycle({  // Cycle plugin
                            prev:   '#prev',
                            next:   '#next',
                            timeout: 0,
                            speed: 250
                    })
                });
            });

My code works fine in that the IMG tags are loaded and the first image of the slide show is displayed. However the prev/next buttons don't work.

When I load the images via static HTML the slideshow prev/next links works fine. (I just copied and pasted the generated HTML.)

I understand I need to use something like .bind or .live to make the Cycle plugin 'see' the new images. I have tried everything I can think of but I can't make it work.

What am I doing wrong ?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX