列表页数据全加载 js分页处理
出现问题：
$("#page").children(‘ul’).children(‘li’).click()
这个动作效果只能在第一次成功，第二次之后不能使用
原因：
页面中的ul元素被重新渲染一次，找不到改元素，无法执行click的动作
方案：
$(document.body).on(‘click’,"#page>ul>li",function(){})
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<style>
li{list-style: none;}
#mysite{height: 330px;}
#mysite .SiteMain{ width: 350px; padding: 5px; border: 1px solid gainsboro; border-radius: 5px; margin-bottom: 15px;}
/*我的站点列表 */
.page ul{float: left;}
.page ul li{float: left; width: 34px; height: 30px; line-height: 30px; text-align: center; border: 1px solid gainsboro; border-radius: 3px; margin: 0 3px; cursor: pointer;}
.page ul li:first-child{text-align: left; padding-left: 5px;}
.page ul li:last-child {text-align: right; padding-right: 5px;}
.page ul li:hover {background: rgba(1,1,1,0.8); color: white;}
.page ul li.active{ background: rgba(103,194,58,0.1); border: 1px solid rgba(103,194,58,0.1); color: #67c23a;}
</style>
</head>
<body>
<div id="mysite">
<div class="SiteMain">
<div class="Site_WebName">
<div class="WebName_Left">网站名称：1111111</div>
<div style="clear: both;"></div>
</div>
<div class="Site_WebAttributes">
<div class="DomainName">
<div class="Unfont">网站域名：111111111111111111</div>
</div>
<div class="WebType">
<div class="Unfont">网站类型：全球电商</div>
</div>
<!-- 套餐类型 定型DIV 开始-->
<div class="PackageType_Choosing">
<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
</div>
</div>
<!-- 套餐类型 修改DIV 结束-->
<div class="WebStatus">
<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
<div class="WebStatus_Right Unfont">
<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="SiteMain">
<div class="Site_WebName">
<div class="WebName_Left">网站名称：22222222</div>
<div style="clear: both;"></div>
</div>
<div class="Site_WebAttributes">
<div class="DomainName">
<div class="Unfont">网站域名：22222222222222222222222222</div>
</div>
<div class="WebType">
<div class="Unfont">网站类型：全球电商</div>
</div>
<!-- 套餐类型 定型DIV 开始-->
<div class="PackageType_Choosing">
<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
</div>
</div>
<!-- 套餐类型 修改DIV 结束-->
<div class="WebStatus">
<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
<div class="WebStatus_Right Unfont">
<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="SiteMain">
<div class="Site_WebName">
<div class="WebName_Left">网站名称：3333333</div>
<div style="clear: both;"></div>
</div>
<div class="Site_WebAttributes">
<div class="DomainName">
<div class="Unfont">网站域名：333333333333333333</div>
</div>
<div class="WebType">
<div class="Unfont">网站类型：全球电商</div>
</div>
<!-- 套餐类型 定型DIV 开始-->
<div class="PackageType_Choosing">
<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
</div>
</div>
<!-- 套餐类型 修改DIV 结束-->
<div class="WebStatus">
<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
<div class="WebStatus_Right Unfont">
<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="SiteMain">
<div class="Site_WebName">
<div class="WebName_Left">网站名称：444444</div>
<div style="clear: both;"></div>
</div>
<div class="Site_WebAttributes">
<div class="DomainName">
<div class="Unfont">网站域名：44444444444444444</div>
</div>
<div class="WebType">
<div class="Unfont">网站类型：全球电商</div>
</div>
<!-- 套餐类型 定型DIV 开始-->
<div class="PackageType_Choosing">
<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
</div>
</div>
<!-- 套餐类型 修改DIV 结束-->
<div class="WebStatus">
<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
<div class="WebStatus_Right Unfont">
<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
<div class="SiteMain">
<div class="Site_WebName">
<div class="WebName_Left">网站名称：55555</div>
<div style="clear: both;"></div>
</div>
<div class="Site_WebAttributes">
<div class="DomainName">
<div class="Unfont">网站域名：555555555555555555555</div>
</div>
<div class="WebType">
<div class="Unfont">网站类型：全球电商</div>
</div>
<!-- 套餐类型 定型DIV 开始-->
<div class="PackageType_Choosing">
<div class="Unfont">套餐类型：<span class="normal success">试用版</span>
</div>
</div>
<!-- 套餐类型 修改DIV 结束-->
<div class="WebStatus">
<div class="WebStatus_Left Unfont">网站状态：<span class="normal success">正常</span></div>
<div class="WebStatus_Right Unfont">
<div>上次计费日期：<span>2019-08-10 18:19:24</span></div>
</div>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="page" id="page">
<ul>
</ul>
</div>
</body>
</html>
<script src="./jquery-3.3.1.js"></script>
<script>
var site = new Array();
var page = 1;
var maxpage = 0;
sitepage();
function sitepage() {
list = $('.SiteMain');
if (list.length == 0) return false;
for (var i=0; i<list.length; i++) {
site[i] = list[i];
}
// 设置分页
gopage(1);
}
function gopage(num) {
$('#mysite').html('');
// 每页包含数据的数量
var pagenum = 2;
// 计算页数
var allpage = site.length / pagenum;
if (parseInt(allpage) != allpage) {
allpage = parseInt(allpage) + 1;
}
maxpage = allpage;
//
var min = (num - 1) * pagenum;
var max = num * pagenum;
// 判断当前页面的内容数量是否超过总数量
max = max>site.length?site.length:max;
var html = '';
for (var i=min; i<max; i++) {
html += site[i].outerHTML;
}
$('#mysite').html(html);
//分页按钮
var phtml = '- 《
'
;
for (var p=1; p<=allpage; p++) {
if (p == num) {
phtml += '+ p+'">'+p+'';
} else {
phtml += '+ p+'">'+p+'';
}
}
phtml += '》 ';
$("#page").html('');
$("#page").html(phtml);
}
// $("#page").children('ul').children('li').click()
$(document.body).on('click',"#page>ul>li",function(){
var _this = $(this);
if (_this.attr('class') == 'active') return false;
pagedata = _this.attr('data-page');
if (pagedata == '-1') {
if (page == 1) return false;
page = parseInt(page) - 1;
} else if (pagedata == '+1') {
if (page == maxpage) return false;
page = parseInt(page) + 1;
} else {
page = pagedata;
}
gopage(page);
});
</script>