我正在创建一个非常简单的脚本，获取文件的目录列表并将其放入一个数组中，然后迭代并吐出 html。它还可以处理完整的分页。
但是当我进行 ajax 调用以从分页加载一组新数据时，它会加载，然后 jquery 似乎会关闭。
我猜我需要一些回调或重绘函数来替换整个#content 包装器。
如何在 ajax 调用后重置我的 javascript？
这是主要的 php 脚本，创建数组和分页:
<?php
$per_page=12;
$dir = 'c:\\inetpub\\wwwroot\\'; //directory of gifs
$files1 = array_slice(scandir($dir), 2); // remove . and .. from array
$array = array_chunk($files1, $per_page); // break the array into 12 images per page
$count = ceil(count($files1) / $per_page); // count amount of pages
$pages = array_filter(array_merge(array(0), $array)); // push array +1 so pagination navigation matches correctly from 1
$pgkey = empty($_GET['showpage']) ? 1 : (int)$_GET['showpage'];
$pages[$pgkey];
// echo "<pre>";
// print_r($pages);
// echo "</pre>";
foreach($pages[$pgkey] as $file)
{
echo '<div class="col-lg-3 col-md-2 col-sm-3 col-xs-4 thumb"> <a class="thumbnail" href="#">'."\n\r";
echo '<img class="freezeframe img-responsive" src="../gifs/images/'. $file . '" alt="">'."\n\r";
echo '</a></div>'."\n\r";
}
// Prev cannot be less than one
$prev = max(1, $pgkey - 1);
// Next cannot be larger than $pages_count
$next = min($count , $pgkey + 1);
$is_first = $pgkey == 1;
$is_last = $pgkey == $count;
echo '<ul id="nav" class="pagination pagination-sm">';
echo !$is_first ? '<li><a data-id="'. $prev .'" href="#">Previous</a></li>' : '';
for($i=1; $i < count($pages)+1; $i++)
{
echo '<li><a data-id="'. $i .'" href="#">'. $i .'</a></li>';
}
//echo "we are at:"; echo $pgkey;
echo !$is_last ? '<li><a data-id="'. $next .'" href="#">Next</a></li>' : '';
echo '</ul>';
?>
这是我的 html/javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Thumbnail Gallery - Start Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/thumbnail-gallery.css" rel="stylesheet">
<link href="css/overrides.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/freezeframe.min.js"></script>
<script>
$("document").ready(function(){
$('#nav li a').click(function(){
var page_id = $(this).data('id');
$.ajax
({
url: 'gifs.php',
data: {"showpage": page_id},
type: 'get',
async:false,
success: function(result)
{
$('#content').html(result).fadeIn(700, function()
{
});
}
});
});
});
</script>
</head>
<body>
<!-- Page Content -->
<div class="container">
<div id="content" class="row">
<?php include "files.php"; ?>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Jared 2015</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
</body>
</html>
最佳答案
您需要委托(delegate)导航链接的点击事件，否则新附加到 DOM 的元素将不会绑定(bind)该事件:
$("#content").on('click', '#nav li a', function() { });
关于javascript - 为什么ajax成功调用后jquery会中断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31998574/