通过ajax

Question

我要做的是在点击与该投资组合项目相关的div时加载投资组合项目。它将加载投资组合单页并填充视图。但是，光滑的滑块没有被实例化，并且在通过ajax加载时不起作用。

这是实例化光滑滑块的代码（通常包含在$（document）.ready中。如果我在控制台中输入它后，ajax被加载它可以工作，但是如果我将它添加到结尾处。 click（）函数（将通过ajax加载内容）它似乎没有被实例化 - 并且控制台中没有任何内容告诉我为什么不：

＆＃13;

＆＃13;

$('.slick-slider').slick({
		lazyLoad: 'ondemand',
		centerMode: true,
		centerPadding: '60px',
		variableWidth: true,
		speed: 300,
		slidesToShow: 1,
		adaptiveHeight: true,
		responsive: [
		    {
		      breakpoint: 1024,
		      settings: {
		        slidesToShow: 3,
		        slidesToScroll: 3,
		        infinite: true,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 2,
		        slidesToScroll: 2
		      }
		    },
		    {
		      breakpoint: 480,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    }
		    // You can unslick at a given breakpoint now by adding:
		    // settings: "unslick"
		    // instead of a settings object
		]
	  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

然后这是我点击

的代码

＆＃13;

＆＃13;

$(document).ready(function() {
	$('#gallery-view > div').click(function() {
		
		var toLoad = $(this).attr('id')+' #portfolio-single';
	    $('#ajax-view').hide('fast',loadContent);
	    $('#load').remove();
	    $('#ajax-wrapper').append('<span id="load">LOADING...</span>');
	    $('#load').fadeIn('normal');
	
	    //window.location.hash = $(this).attr('id').substr(0,$(this).attr('href'));
	    function loadContent() {
	        $('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
	    }
	   
	    function showNewContent() {
		    	        $('#ajax-view').show('normal',hideLoader());	         
	    }
	    function hideLoader() {
	        $('#load').delay(1000).fadeOut('normal');
	    }

	});
	
	  
});

＆＃13;

＆＃13;

＆＃13;

我想要完成此任务的链接可以在以下网址找到：

http://april.philiparudy.com/gallery/

如果您点击带有圆形图像的div，您将看到它加载时没有光滑的滑块。

我在这里使用单个滑动滑块：http://april.philiparudy.com/portfolio/abby-warner/

是否有某种类型的回调函数可以运行以在加载ajax后实例化光滑滑块？

Answer 1

你的代码几乎可以。问题是您要将click分配给#gallery-view > div。

您必须获取现有元素，而不是在函数click之后添加的元素。所以尝试更改它并获取父级或向我显示ajax调用以查看您在何处添加新项目。

同时将click更改为onclick，且这些功能不应位于$(document).ready

内

看看下面的内容。

$(document).ready(function() {
    $('#gallery-view > div').on('click', function() {
        var toLoad = $(this).attr('id')+' #portfolio-single';
        $('#ajax-view').hide('fast',loadContent);
        $('#load').remove();
        $('#ajax-wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
    });  
});

    function loadContent() {
        $('#ajax-view').delay(1000).load(toLoad,'',showNewContent());
    }

    function showNewContent() {
                    $('#ajax-view').show('normal',hideLoader());             
    }
    function hideLoader() {
        $('#load').delay(1000).fadeOut('normal');
    }

希望它有所帮助！