Question

我正在尝试在加载ajax的内容上加载插件Jquery Cycle，但是我收到此错误并且它似乎不起作用：

“[循环]终止;选择器找到零元素”

这是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();
});

});

这是插件：http://malsup.github.com/jquery.cycle.all.js

如何修复此错误以加载插件？

我正在按照本教程的方式进行操作......我也是用干净的HTML做的，它确实有效！问题是当我将它与ajax加载的内容集成时： http://line25.com/tutorials/build-a-simple-image-slideshow-with-jquery-cycle

Answer 1

你为什么不这样做$("#slides")？您的页面上只应有一个ID为“幻灯片”的元素。如果需要选择多个对象，请考虑使用css类，然后选择$('.class-name')。

Answer 2

我认为问题在于，在通过AJAX将数据加载到列表之前，您尝试在空列表中初始化循环。相反，您应该在将数据作为列表项注入DOM后初始化循环：

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

在ajax加载的内容上加载jquery循环

2 个答案: