我有一个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用户认证的问题。代码没有错!是! –