Load jquery cycle on ajax loaded content

Question

I'm trying to load the plugin Jquery Cycle on an ajax loaded content, but I get this error and it doesn't seem to work:

"[cycle] terminating; zero elements found by selector "

This is the loader.js:

$(document).ready(function(){

// load home when the page loads
$("#content").load("home.html", function(){
  $(this).fadeIn("slow");
});

// load artworks page
$("#artworks > a").click(function(){
    $("#content").hide();
    $("#content").load("artworks.html", function(){
        $(this).fadeIn("slow");
    });
});

    // load projects page
    $("#artworks ul li a").click(function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

    // load single project page         
    $("#project_page").live("click", function(){
        $("#content").hide();
        $("#content").load("project.html", function(){
            $(this).fadeIn("slow");
        });
    });

        // load single project page         
        $("#project_slider").live("click", function(){
            $("#content").hide();
            $("#content").load("project_inside.html", function(){
                $(this).fadeIn("slow");
            });
        });

        // back to projects page        
        $(".back").live("click", function(){
            $("#content").hide();
            $("#content").load("project.html", function(){
                $(this).fadeIn("slow");
            });
        }); 

// load prensa page
$("#prensa_nav").click(function(){
    $("#content").hide();
    $("#content").load("prensa.html", function(){
      $(this).fadeIn("slow");
    });
});

// load contacto page
$("#contacto_nav").click(function(){
    $("#content").hide();
    $("#content").load("contacto.html", function(){
      $(this).fadeIn("slow");
    });
}); 

// SIDEBAR MENU

// Add class of drop if item has sub-menu
$('ul.submenu').hide().parent('li').addClass('drop');

// open submenu
$('.drop').click(function(){
   $('.submenu',this).slideToggle();
});

//hide submenu when you click other main items            
 $('#menu>li').click(function(){
     if(!$(this).hasClass('active')){
         $('.active .submenu').slideUp();
     }
});

//hide submenu when you click other main items -diego           
 $('#menu li#prensa_nav').click(function(){
     if(!$(this).hasClass('active')){
         $('.submenu').slideUp();
     }
});

//hide submenu when you click other main items -diego           
 $('#menu li#contacto_nav').click(function(){
     if(!$(this).hasClass('active')){
         $('.submenu').slideUp();
     }
});

// active menu item    
$('#menu li').click(function(event) {
    $('#menu li').removeClass('active');
    $(this).addClass('active');      
    event.stopPropagation();
});

// active menu item -diego  
$('#menu li ul li').click(function(event) {
    $('#menu li#artworks ').addClass('active');     
    event.stopPropagation();
});  

});

$(window).load(function() {

// Slider  
$("#slideshow").css("overflow", "hidden");

$("ul#slides").cycle({
    fx: 'fade',
    pause: 1,
    prev: '#prev',
    next: '#next'
    });

$("#slideshow").hover(function() {
    $("ul#nav").fadeIn();
},

function() {
    $("ul#nav").fadeOut();
});

});

Here it's the plugin: http://malsup.github.com/jquery.cycle.all.js

How can I fix this error to load the plugin?

i'm following this tutorial where it does that way... also I did it with a clean HTML and it worked!! the problem is when I integrate it with the ajax loaded content: http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

Answer 1

Why don't you just do $("#slides") ? You should only have one element with an ID of "slides" on your page. If you need to select multiple objects, consider using a css class and then select with $('.class-name') .

Answer 2

I think the problem is that you're trying to initialize the cycle on an empty list, before the data is loaded into the list via AJAX. You should, instead, initialize the cycle after the data is injected into the DOM as list items:

$('#content').load('home.html', function(){
    $("ul#slides").cycle({
        fx: 'fade',
        pause: 1,
        prev: '#prev',
        next: '#next'
    });
});