通过 ajax 加载内容时，光滑的滑块不会实例化

Question

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

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

$('.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
		]
	  });

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

然后这是我的点击代码

$(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');
	    }

	});
	
	  
});

我正在尝试完成此操作的链接可以在以下位置找到：

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');
    }

希望对你有帮助！