列表页数据全加载 js分页处理

最新推荐文章于 2023-03-26 17:33:02 发布

qq_28404381

最新推荐文章于 2023-03-26 17:33:02 发布

阅读量361

点赞数 1

分类专栏： javascript 文章标签：无跳转分页分页无刷新

本文链接：https://blog.csdn.net/qq_28404381/article/details/100512347

版权

本文探讨了在JavaScript中处理无跳转分页和无刷新加载的问题。当使用`$("#page").children('ul').children('li').click()`实现点击分页时，发现该方法仅在首次点击有效。原因是页面的`ul`元素在后续操作中被重新渲染，导致点击事件失效。为解决这个问题，提出采用`$(document.body).on('click','#page>ul>li', function(){});`的方案，确保即使元素被动态创建，点击事件也能正确绑定并执行。" 78023343,4889583,社区发现算法与局部社团分析,"['社团网络', '局部社团网络', '图论', '网络分析', '数据挖掘']

摘要由CSDN通过智能技术生成

出现问题：

$("#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

最低0.47元/天解锁文章

qq_28404381

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表页数据全加载 js分页处理

出现问题：$("#page").children(‘ul’).children(‘li’).click()这个动作效果只能在第一次成功，第二次之后不能使用原因：页面中的ul元素被重新渲染一次，找不到改元素，无法执行click的动作方案：$(document.body).on(‘click’,"#page>ul>li",function(){})<!DOCTYPE &...
复制链接

扫一扫

专栏目录