jQuery 图像轮播设置不适用于动态生成的内容 (Flickr API)答案

【问题标题】：jQuery image carousel settings doesn't apply to dynamic generated content (Flickr API)jQuery 图像轮播设置不适用于动态生成的内容 (Flickr API)
【发布时间】：2016-07-06 14:31:08
【问题描述】：

希望你能帮忙！ :)

我正在尝试使用动态加载的内容而不是静态代码创建图像轮播 (Owl Carousel)。此动态内容是使用 jQuery 和 Flickr API 生成的。

您将在下面找到的脚本从特定的 Flickr 相册中检索图像并将数据转换为 HTML 元素（图像 + 链接）。使用 $.each(data.photoset.photo, function(i, item){ 函数，我正在根据给定的要求创建轮播的内容。

问题是，不知何故，来自 Owl Carousel 的 jQuery 设置不适用于动态生成的内容。在浏览器中使用检查元素，我可以看到内容已正确生成，并且某些轮播设置已应用于生成的内容，但未显示在前端：view screenshot

注意：将动态内容转换为静态内容并将其插入到轮播中可以正常工作。似乎是使用另一个脚本在动态创建的内容上应用 jQuery 插件的组合导致了问题。

从<body> 截取的代码（脚本中需要 API 密钥）：

<body>

<div class="owl-carousel">
</div> 

<script type="text/javascript">
function getFlickrImages(setId) {
  var URL = "https://api.flickr.com/services/rest/" +  // Wake up the Flickr API gods.
    "?method=flickr.photosets.getPhotos" +  // Get photo from a photoset. https://www.flickr.com/services/api/flickr.photosets.getPhotos.htm
    "&api_key=<YOUR-API-KEY>" +  // API key. Get one here: http://www.flickr.com/services/apps/create/apply/
    "&photoset_id=72157663149819061" +  // The set ID.
    "&user_id=135343422@N06" +
    "&privacy_filter=1" +  // 1 signifies all public photos.
    "&per_page=10" + // For the sake of this example I am limiting it to 20 photos.
    "&format=json&nojsoncallback=1";  // Er, nothing much to explain here.

  // See the API in action here: https://www.flickr.com/services/api/explore/flickr.photosets.getPhotos
  $.getJSON(URL, function(data){
    var owner = data.photoset.owner;
    var phot_set_id = data.photoset.id;
    $.each(data.photoset.photo, function(i, item){
      // Creating the image URL. Info: https://www.flickr.com/services/api/misc.urls.html
      var img_src = "https://farm" + item.farm + ".static.flickr.com/" + item.server + "/" + item.id + "_" + item.secret + "_m.jpg";
      //var img_thumb = $("<img/>").attr("src", img_src).attr("id", item.id).css("margin", "8px");
      var link_src = "https://www.flickr.com/photos/" + owner + "/" + item.id + "/in/set-"+phot_set_id;
      var img_link =   $("<a/>").attr("href", link_src);
      var img_thumb = $('<img />').attr({src:img_src}).appendTo($('<a />').attr({href:link_src,target:"_blank"}).appendTo($('.owl-carousel')).wrap("<div></div>"));

    });
  });
}
$(document).ready(function() {
  getFlickrImages("72157650210689192"); // Call the function!
});
</script>

<!-- OWL CAROUSEL - http://www.owlcarousel.owlgraphic.com/ -->
<script src="owl.carousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
</script>

</body>

【问题讨论】：

标签： javascript jquery dynamic flickr dynamic-content

【解决方案1】：

尝试添加行

$(".owl-carousel").owlCarousel();

在函数 getFlickrImages(setId) 的末尾。

问题可能是应用了第一个 document.ready() 的 owlCarousel 设置被调用，而当时您的动态内容尚未生成。因此，如果您在函数 getFlickrImages(setId) 的末尾应用 owlCarousel，则您的 dom 内容已经生成，然后将应用轮播。

我在使用另一个液体旋转木马 (http://www.nikolakis.net/liquidcarousel/) 时遇到了同样的问题，但应用了与我上面描述的相同的解决方案并且它有效。

希望对你有帮助。

【讨论】：