Question

基本“在滚动上加载更多”AJAX功能，控制台显示从请求发回的HTML，但不呈现任何内容。我必须忽视一些非常简单的事情。

$(window).scroll(function()
{
   if($(window).scrollTop() == $(document).height() - $(window).height())
    {
        $('div#loadmoreajaxloader').show();
        $.ajax({
        url: "loader.php",
        success: function(html)
        {
            if(html)
            {
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
            }
        }
        });
    }
});

<div id="postswrapper">
	<div id="loadmoreajaxloader" style="color: #FFF;">
		<span class="loader"><span class="loader-inner"></span></span>
	</div>
</div>

在滚动时，加载程序会根据请求隐藏，但不会从loader.php返回任何HTML。尽管如此，加载loader.php本身会提供正确的HTML，所以我确定问题出在AJAX上。

请求返回HTML

<td>
  <div class="foliocontainer" style="background-image:url('./img/FOLIO/JDOUBLE - THE DROP 1.jpg');" name="counter1 row6"><ul class="overlaycontainer"><li><a href="./img/FOLIO/JDOUBLE - THE DROP 1.jpg" data-lightbox="JDOUBLE - "THE DROP"" data-title="JDouble - The Drop (2014)"><span class="textoverlay"><span>JDOUBLE - "THE DROP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/CEDEK - ACTION v8.jpg');" name="counter2 row5"><ul class="overlaycontainer"><li><a href="./img/FOLIO/CEDEK - ACTION v8.jpg" data-lightbox="CEDEK - "ACTION REMIX"" data-title="Cedek & Niko Javan - Action Remix (2015)"><span class="textoverlay"><span>CEDEK - "ACTION REMIX" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/DEAUX APRIL 1 - UNION.jpg');" name="counter3 row4"><ul class="overlaycontainer"><li><a href="./img/FOLIO/DEAUX APRIL 1 - UNION.jpg" data-lightbox="EVENT FLYER" data-title="Event Flyer (2015)"><span class="textoverlay"><span>EVENT FLYER <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/LINZ PRAG - HIGH UP.jpg');" name="counter1 row3"><ul class="overlaycontainer"><li><a href="./img/FOLIO/LINZ PRAG - HIGH UP.jpg" data-lightbox="LINZ PRAG - "HIGH UP"" data-title="Linz Prag - High Up (2014)"><span class="textoverlay"><span>LINZ PRAG - "HIGH UP" <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/BAZAAR v5.jpg');" name="counter2 row2"><ul class="overlaycontainer"><li><a href="./img/FOLIO/BAZAAR v5.jpg" data-lightbox=""BAZAAR"" data-title="HPNTK & LEViTATE - Bazaar (2015)"><span class="textoverlay"><span>"BAZAAR" <br /><center><span style="font-size: 18px;">2015</span></center></span></span></a></li></ul></div></td><td><div class="foliocontainer" style="background-image: url('./img/FOLIO/ATLFOREVER4-V5.jpg');" name="counter3 row1"><ul class="overlaycontainer"><li><a href="./img/FOLIO/ATLFOREVER4-V5.jpg" data-lightbox=""ATLANTA FOREVER 4" CONCEPT ART " data-title="Atlanta Forever 4 Concept Art (2014)"><span class="textoverlay"><span>"ATLANTA FOREVER 4" CONCEPT ART  <br /><center><span style="font-size: 18px;">2014</span></center></span></span></a></li></ul></div></td><td width="20%"><div class="spacer20"></div></td></tr><tr><td width="20%"><div class="spacer20"></div></td>

Answer 1

返回的HTML出错。在主页面中使用$ counter来指定何时应该创建表中的新行。在外部调用（loader.php）中使用相同的变量会导致$ counter成为不正确的值，尽管它在外部页面上是独立的。将外部页面变量更改为$ counter2解决了这个问题。

Ajax做了所有事情，但附加了HTML

1 个答案: