jquery - 附加的 DIV 仅在调整大小时显示

Question

对于我的投资组合网站，我正在调用一个 json 对象，对其进行解析并动态构建 div。一切正常，但我附加的 div 没有出现。它是空白的。如果我尝试调整窗口大小，内容就会神奇地出现。

网站是http://imajination.in

Js 是 -> root-> JS -> Main.js（第 65 行）

$.getJSON('./clients.txt',function(data){
     for(var i in data) {
          var generated = '
          <div id="siteRoll">
               <div class="thumb"><img src="clients/'+data[i].thumb+'"></div>
               <div class="info">
                    <span class="title">'+data[i].name+'</span>
                    <span class="desc">CLIENT : '+data[i].client+'</span>
                    <span class="desc">TYPE   : '+data[i].type+'</span>
                    <span class="desc2">'+data[i].desc1+'</span>
                    <span class="desc2">'+data[i].desc2+'</span>
                    <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit site</a></span>
               </div><!-- info -->
          </div><!-- siteRoll -->';

          $('article#portfolio #sliderPort .swipe-wrap').append(generated);
     }
});

任何想法 ？

Answer 1

看看这是否有帮助：

$.getJSON('./clients.txt',function(data) {
 var htm = null;
 for(var i in data) {
      htm += '
      <div id="siteRoll">
           <div class="thumb"><img src="clients/'+data[i].thumb+'"></div>
           <div class="info">
                <span class="title">'+data[i].name+'</span>
                <span class="desc">CLIENT : '+data[i].client+'</span>
                <span class="desc">TYPE   : '+data[i].type+'</span>
                <span class="desc2">'+data[i].desc1+'</span>
                <span class="desc2">'+data[i].desc2+'</span>
                <span class="visit"><a href="'+data[i].url+'" target="_blank">Visit    site</a></span>
           </div><!-- info -->
      </div><!-- siteRoll -->';
  }

  $('article#portfolio #sliderPort .swipe-wrap').html(htm);
});

Answer 2

您似乎是在页面加载时构建轮播，但在页面加载后附加其内容。大多数轮播（假设它是一个插件）不是这样工作的——在构建内容之前，您需要先呈现您的内容。

这个特殊的轮播似乎也会对 window.resize 做出反应，所以这就是为什么只有在调整窗口大小并且轮播刷新后才能获得内容的原因。

如果插件支持它，我会查看一个 refresh() 方法，并在您在页面加载时附加动态数据后调用它。