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

Question

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

这是实例化滑动滑块的代码（通常包装在$（document）.ready中。如果我在控制台中输入ajax后加载它，它会工作，但是如果我将它添加到。点击（）函数（这将加载通过AJAX的内容）似乎不intantiated - 而不是在控制台告诉我为什么不：

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

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

当年这里是我的代码点击的

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

 
\t }); 
 
\t 
 
\t 
 
});

为此我试图做到这一点的链接，可以发现在：

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

如果你在一个div点击与一个圆形图片，你会看到它加载不光滑的滑块。

我有一个漂亮的滑块在这里工作：http://april.philiparudy.com/portfolio/abby-warner/

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

Answer 1

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

您必须获取现有元素，而不是在功能click .so之后添加的元素，以尝试更改并获取父项或向我显示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'); 
    } 

希望它的帮助！