javascript - 通过 ajax 加载内容时，光滑 slider 不会实例化

Question

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

这是实例化光滑 slider 的代码(通常包含在 $(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，您将看到它在没有平滑 slider 的情况下加载。

我这里有一个光滑的 slider :http://april.philiparudy.com/portfolio/abby-warner/

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

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

希望对你有帮助!