jquery.page分页插件重复调用导致点击事件覆盖

朴灿烈づ我的快乐病毒、 2021-09-25 11:52 145阅读 0赞

### 文章目录 ###

*   *   *   *  分页插件源码
             *  添加的代码
             *  完整的修改后的代码

做动态查询的时候，经常需要重置分页，当第二次调用时，会出现点击事件覆盖，导致诸如点击下一页时向后跳转多页的情况。网上没找到靠谱的方法，于是自己改了源码，好在源码很短，非常好改。

#### 分页插件源码 ####

很明显，问题出在`bindEvent`，只需要在之前清除事件即可。

#### 添加的代码 ####

init:function(obj,args){ 
    			return (function(){ 
    				ms.unbindEvent(obj,args);
    				ms.fillHtml(obj,args);
    				ms.bindEvent(obj,args);
    			})();
    		},
    		unbindEvent: function(obj,args){ 
    			return (function(){ 
    				obj.off("click","a.tcdNumber");
    				obj.off("click","a.prevPage");
    				obj.off("click","a.nextPage");
    			})();
    		},

添加了`unbindEvent`方法，注意必须要添加在`fillHtml`方法后面。

#### 完整的修改后的代码 ####

//分页插件
 /** 2014-08-05 ch **/
 (function($){ 
 	var ms = { 
 		init:function(obj,args){ 
 			return (function(){ 
 				ms.unbindEvent(obj,args);
 				ms.fillHtml(obj,args);
 				ms.bindEvent(obj,args);
 			})();
 		},
 		unbindEvent: function(obj,args){ 
 			return (function(){ 
 				obj.off("click","a.tcdNumber");
 				obj.off("click","a.prevPage");
 				obj.off("click","a.nextPage");
 			})();
 		},
 		//填充html
 		fillHtml:function(obj,args){ 
 			return (function(){ 
 				obj.empty();
 				//上一页
 				if(args.current > 1){ 
 					obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
 				}else{ 
 					obj.remove('.prevPage');
 					obj.append('上一页');
 				}
 				//中间页码
 				if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
 					obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
 				}
 				if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ 
 					obj.append('...');
 				}
 				var start = args.current -2,end = args.current+2;
 				if((start > 1 && args.current < 4)||args.current == 1){ 
 					end++;
 				}
 				if(args.current > args.pageCount-4 && args.current >= args.pageCount){ 
 					start--;
 				}
 				for (;start <= end; start++) { 
 					if(start <= args.pageCount && start >= 1){ 
 						if(start != args.current){ 
 							obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
 						}else{ 
 							obj.append(''+ start +'');
 						}
 					}
 				}
 				if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ 
 					obj.append('...');
 				}
 				if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ 
 					obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
 				}
 				//下一页
 				if(args.current < args.pageCount){ 
 					obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
 				}else{ 
 					obj.remove('.nextPage');
 					obj.append('下一页');
 				}
 			})();
 		},
 		//绑定事件
 		bindEvent:function(obj,args){ 
 			return (function(){ 
 				obj.on("click","a.tcdNumber",function(){ 
 					var current = parseInt($(this).text());
 					ms.fillHtml(obj,{ "current":current,"pageCount":args.pageCount});
 					if(typeof(args.backFn)=="function"){ 
 						args.backFn(current);
 					}
 				});
 				//上一页
 				obj.on("click","a.prevPage",function(){ 
 					var current = parseInt(obj.children("span.current").text());
 					ms.fillHtml(obj,{ "current":current-1,"pageCount":args.pageCount});
 					if(typeof(args.backFn)=="function"){ 
 						args.backFn(current-1);
 					}
 				});
 				//下一页
 				obj.on("click","a.nextPage",function(){ 
 					var current = parseInt(obj.children("span.current").text());
 					ms.fillHtml(obj,{ "current":current+1,"pageCount":args.pageCount});
 					if(typeof(args.backFn)=="function"){ 
 						args.backFn(current+1);
 					}
 				});
 			})();
 		}
 	}
 	$.fn.createPage = function(options){ 
 		var args = $.extend({ 
 			pageCount : 10,
 			current : 1,
 			backFn : function(){ }
 		},options);
 		ms.init(this,args);
 	}
 })(jQuery);