可以用js的事件委托啊。
比如你的分页生成的代码会插入到一个<div id="pager"></div>里，在生成html片段时为a设置一个属性用来表示页数，如：<a href="#" data-page="1">第1页</a>
事件委托的js代码如下：
$('#pager').delegate('a', 'click', function(e){
e.preventDefault() //阻止a的默认事件
var page = $(this).data('page') //从当前a标签属性中取出页码
//处理分页，如果是跳转：
location.href = "/pagename.php?page=" + page
//如果是异步取分页数据：
var page_api = '/pagedata.php?page=' + page
$.get(page_api, function(data, textStatus, jqXHR){
//使用ajax获取数据
//拼装数据并填充到数据显示区：
$('#list-container').append( createHTML(data) )
//重新生成分页区
createPager( page )
})
})
function createHTML(data){
//拼装数据的函数
}
function createPager(curPage){
//生成分页的函数
var tpl = '<a href="#" data-page="{#index}">第{#index}页</a>'
//...
}
好的废话不多说 我直接给出一份演示
现在我要对id为demo的节点的后代的拥有class test的节点进行监听
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo .test{
width: 10px
height: 10px
background-color: #00AEEF
margin: 5px
}
</style>
</head>
<body>
<div id="demo">
</div>
<script>
//获取所有的父节点
function getParentNode(Obj,Arr){
if(!Arr){
var Arr=[]
}
Arr.push(Obj)
if(Obj&&Obj.parentNode){
getParentNode(Obj.parentNode,Arr)
}
return Arr
}
//判断是否拥有class
function hasClass(e,v){
if(!e.getAttribute)return false
if(e.getAttribute("class")==null)return false
var allClass=e.getAttribute("class").split(" ")
if(allClass.indexOf(v)!=-1){return true}else{return false}
}
//事件委托 现在我要对id为demo的节点的后代的拥有class test的节点进行监听
//添加事件
document.getElementById("demo").addEventListener("click",function(e){
e=e||(typeof window.event=="undefined"?event:window.event)//这里对事件对象进行了一个兼容
var target=typeof e.srcElement=="undefined"? e.target: e.srcElement
var path=getParentNode(target)
for(var i=0i<path.lengthi++){
if(hasClass(path[i],"test")){
clickTest.call(path[i],e)
}
}
function clickTest(e){
console.log("你点了这个节点")
console.log(e)
console.log(this)
}
})
document.getElementById("demo").innerHTML="<div class='test'><span>"+
"asdasd</span></div>"
</script>
</body>
</html>
可以看到当我执行domObj.innerHTML=xxx时我是没有对class为test进行添加事件的 但是我点击它执行的函数就是clickTest
具体原理自己看代码吧 我就不详细说了
