我有一個HTML5模板,我用動態jQuery/ajax生成的內容替換靜態內容。內容在Chrome等桌面瀏覽器上顯示得很好。當我嘗試在iPhone或iPad等移動設備上查看內容時,動態生成的內容不會顯示出來。我將發佈靜態內容和動態內容。動態jQuery內容沒有顯示在移動HTML5
靜態內容
\t \t \t \t \t <div class="col-lg-6 wow fadeInLeft">
<article class="row row-no-gutter blog-post">
<div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image"
style="background-image: url('images/page-1_img09.jpg')" data-equal-group="1">
</div>
<div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="1">
<div class="blog-post__cnt">
\t
<h5>some text</h5>
<hr class="sm sm--inset-2 sm-default"/>
<p>some text</p>
<p>some text</p>
<a href="#" class="btn-link">READ MORE</a>
</div>
</div>
</article>
</div>
<div class="col-lg-6 wow fadeInRight">
<article class="row row-no-gutter blog-post">
<div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right pull-lg-left"
style="background-image: url('images/page-1_img10.jpg')" data-equal-group="1"></div>
<div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="1">
<div class="blog-post__cnt">
<h5>some text</h5>
<hr class="sm sm--inset-2 sm-default"/>
<p>some text</p>
<a href="#" class="btn-link">READ MORE</a>
</div>
</div>
</article>
</div>
<div class="col-lg-6 wow fadeInLeft">
<article class="row row-no-gutter blog-post">
<div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-lg-right"
style="background-image: url('images/page-1_img11.jpg')" data-equal-group="2"></div>
<div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="2">
<div class="blog-post__cnt">
<h5>some text</h5>
<hr class="sm sm--inset-2 sm-default"/>
<p>some text</p>
<a href="#" class="btn-link">READ MORE</a>
</div>
</div>
</article>
</div>
<div class="col-lg-6 wow fadeInRight">
<article class="row row-no-gutter blog-post">
<div class="col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right"
style="background-image: url('images/page-1_img12.jpg')" data-equal-group="2"></div>
<div class="col-xs-12 col-sm-6 text-md-left" data-equal-group="2">
<div class="blog-post__cnt">
<h5>some text</h5>
<hr class="sm sm--inset-2 sm-default"/>
<p>some text</p>
<a href="#" class="btn-link">READ MORE</a>
</div>
</div>
</article>
</div>
動態內容
<script type="text/javascript">
\t \t var html = "";
\t
\t \t function assetsPost() {
\t \t $.ajax({
\t \t \t cache: false,
\t \t \t type:'GET',
\t \t \t url:'cfc/cfc_Forum.cfc?method=getMessages&returnformat=json',
\t \t \t dataType: "json",
\t \t \t data: {
\t \t \t \t maxRows: 4,
\t \t \t \t origin: 1,
\t \t \t \t },
\t \t \t success:function(data) {
\t \t \t \t if(data) { // DO SOMETHING
\t \t \t \t jQuery.each(data, function(i, val) {
\t \t \t \t \t $('#messages').html(data[i].annotation);
\t \t \t \t \t var threadID = data[i].thread;
\t \t \t \t \t var BodyText = data[i].body;
\t \t \t \t \t var name \t \t = data[i].name;
\t \t \t \t \t var MessageID \t = data[i].MessageID;
\t \t \t \t \t var photo \t \t = data[i].photo;
\t \t \t \t \t var annotation = data[i].annotation;
\t \t \t \t \t \t if(i == 0) {
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInLeft'>";
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>";
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image' style='background-image: url(" + photo + ")' data-equal-group='1'></div>";
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='1'>";
\t \t \t \t \t \t }
\t \t \t \t \t \t else if(i == 1) {
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInRight'>";
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>";
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right pull-lg-left' style='background-image: url(" + photo + ")' data-equal-group='1'></div>";
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='1'>";
\t \t \t \t \t \t }
\t \t \t \t \t \t else if(i == 2){
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInLeft'>";
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>";
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-lg-right' style='background-image: url(" + photo + ")' data-equal-group='1'></div>";
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='2'>";
\t \t \t \t \t \t }
\t \t \t \t \t \t else if(i == 3){
\t \t \t \t \t \t html += "<div class='col-lg-6 wow fadeInRight'>";
\t \t \t \t \t \t html += "<article class='row row-no-gutter blog-post'>";
\t \t \t \t \t \t html += "<div class='col-xs-8 col-xs-offset-2 col-sm-offset-0 col-sm-6 bg-image pull-sm-right' style='background-image: url(" + photo + ")' data-equal-group='1'></div>";
\t \t \t \t \t \t html += "<div class='col-xs-12 col-sm-6 text-md-left' data-equal-group='2'>";
\t \t \t \t \t \t }
\t \t \t \t \t html += "<div class='blog-post__cnt'>";
\t \t \t \t \t \t
\t \t \t \t \t \t html += "<h5>" + name + "</h5>"
\t \t \t \t \t \t html += "<hr class='sm sm--inset-2 sm-default'/>";
\t \t \t \t \t \t html += "<p>" + BodyText.substr(0, 400) + "</p>";
\t \t \t \t \t \t html += "<a href='#' class='btn-link'>READ MORE</a>"; \t \t \t
\t \t \t \t \t \t
\t \t \t \t \t html += "</div>";
\t \t \t \t \t html += "</div>";
\t \t \t \t \t html += "</article>";
\t \t \t \t \t html += "</div>";
\t \t \t \t });
\t \t \t \t \t $('#qMessage').html(html);
\t \t \t \t } else { // DO SOMETHING
\t \t \t }
\t \t \t }
\t \t });
\t }
\t assetsPost();
\t </script>
任何幫助很受讚賞。
我剛剛意識到內容不會顯示在Firefox中。 arg ... –
發現我自己的問題。這是coldfusion用戶認證的問題。代碼沒有錯!是! –