嗨,我正试图将HTML附加到列表中以创建无限滚动效果,请不要回复我使用插件。
我从检查器那里知道,onClick()通过它调用的PHP脚本正确地生成了HTML,但是生成的HTML没有附加到文档的其余部分。
这是我的代码(JQuery已导入):
HTML:
<body>
<div id='container'>
<?php include 'inc/header.php'; ?>
<?php include 'inc/nav.php'; ?>
<section class="grid-wrap">
<ul class="grid swipe-right custom-grid" id="grid">
<?php
$files = glob('img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
$total = 9; //count($files);
for ($i = 0; $i < $total; ++$i) {
echo "<li><a href='" . $files[$i] . "' target='_blank'><img class='lazy' src='" . $files[$i] . "' alt= 'Image of Sheila' /><h3>View Full Image</h3></a></li>";
}
?>
</ul>
<div id='load-more'>VIEW MORE PHOTOS</div>
</section>
<?php include 'inc/footer.php'; ?>
</div>
<script>
$('#load-more').click(function(){
$.ajax({
url: 'inc/gallery/gallery2.php',
dataType: 'html',
sucess: function(php){$('.grid-wrap').append(php);}
});
});
</script>
</body>
gallery2.php:
<?php
$files = glob('../../img/gallery/*.{jpg,png,gif,JPG}', GLOB_BRACE);
$total = 9;
$id = 1;
echo '<ul class="grid swipe-right custom-grid" id="grid' . $id . '">';
for ($i = $total; $i < ($total + 9); ++$i) {
echo "<li>
<a href='" . $files[$i] . "' target='_blank'>
<img src='" . $files[$i] . "' alt= 'Image of Sheila' />
<h3>View Full Image</h3>
</a>
</li>";
}
$total+= 9;
echo '</ul>';
?>
只是我的评论x的转发。
我认为您在ajax回调中将"success"误键入为"sucess"。
正如Renald Lam所说,你把成功误认为成功:
更改此项:
sucess: function(php){$('.grid-wrap').append(php);
至:
success: function(php){$('.grid-wrap').append(php);
U在success
函数中缺少s
并尝试
$('#load-more').click(function(){
$.ajax({
url: 'inc/gallery/gallery2.php',
dataType : 'html',
success: function(php){
$('.grid-wrap ul').append(php);
}
});
});