getJson 和 Cycle2

Question

我正在运行查询以使用 getJson 获取 JSON 格式的新闻源，然后我将其放置在 div 中，作为 divs他们自己使用 jQuery Cycle2 进行轮换。当我在 div 中硬编码它们时，我可以让 jQuery Cycle2 处理新闻项，但是当我通过 getJson 添加它时，它不会触发。如何更改动态内容以在循环触发之前加载？

我什至将 javascript 移到 jQuery.Cycle2.js 上方，但运行没有想法，所以我很好奇是否有人遇到过这种情况之前以及他们如何处理它。

到目前为止我的代码


<div class="cycle-pager news-pager"></div>
<div id="news-area" class="cycle-slideshow oh"
data-cycle-swipe=true
data-cycle-swipe-fx=scrollHorz
    data-cycle-fx="scrollHorz"
    data-cycle-timeout="8000"
    data-cycle-auto-height="calc"
    data-cycle-pause-on-hover="true"
    data-cycle-pager=".news-pager"
    data-cycle-pager-event="mouseover"
    data-cycle-slides="> div"
>

</div>
<script> 
$.getJSON('https://mydomain.ca/feed/PressRelease.svc/GetPRList?apiKey=XXXX', function(data) {
               $.each(data.GetPRListResult, function(i, f) {
                  var tblRow = "<div class='news-item'><div class='heading date'>" + f.PressReleaseDate + "</div><h3><a href=https://investors.wfsinc.com" + f.LinkToDetailPage + ">" + f.Headline + "</a></h3></div>";
                    $(tblRow).appendTo("#news-area");


             });                    
           });
</script>

Answer 1

来自Cycle2 main page：

Auto-initialization is not supported for slideshows that are added to the DOM after jQuery's ready event has fired.

并且：

You'd rather set your options via script than in the markup? Ok fine, have it your way.

由于.getJSON()方法是async的，只能使用脚本方式实例化Cycle.

Cycle2 documentation可能会有用。

它将在 .getJSON() 回调中。

注意我没有使用用于自动初始化的 cycle-slideshow class...

<div class="cycle-pager news-pager"></div>
  <div id="news-area" class="cycle-slideshow_notInitiated oh">
</div>

<script>
$.getJSON('https://mydomain.ca/feed/PressRelease.svc/GetPRList?apiKey=XXXX', function(data) {
  $.each(data.GetPRListResult, function(i, f) {
    var tblRow = "<div class='news-item'><div class='heading date'>" + f.PressReleaseDate + "</div><h3><a href=https://investors.wfsinc.com" + f.LinkToDetailPage + ">" + f.Headline + "</a></h3></div>";
    $(tblRow).appendTo("#news-area");
  });
  
  // Instantiate Cycle here
  $(".cycle-slideshow_notInitiated ").cycle({
    swipe: true,
    "swipe-fx": "scrollHorz",
    fx: "scrollHorz",
    timeout: 8000,
    "auto-height": "calc",
    "pause-on-hover": true,
    pager: ".news-pager",
    "pager-event": "mouseover",
    slides: "> div"
  })
  
});
</script>

getJson 和 Cycle2

getJson and Cycle2

jquery

cycle2