在使用ajax的回调函数中,往html页面添加内容,使用一般的方法绑定事件,是没用的,需要使用以下方法
$(“#pageNum”).on(‘click’,’#nextPage’,function(){}) //把点击事件绑定到id为pageNum的子级元素id为nextPage的元素身上
- 例如:做出分页效果
// html
<ul id="pageNum">
</ul>
// js部分(使用包装过的ajax)
// currentPage 当前在第几页
// pageTotal 总页数
function getPageTotal() {
myAjax("get","/getPageTotal.do","",function () {
let data=JSON.parse(xhr.responseText);
let pageNum = [];
for (var item = 1; item <= data; item++) {
pageNum.push(" <li>");
pageNum.push(" <a href=\"javascipt:;\">" + item + "</a>");
pageNum.push(" </li>");
}
// 往html页面添加内容
$("#pageNum").html(`<li id="prevPage"><a href="javascipt:;" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`+
pageNum.join('') +`<li id="nextPage"><a href="javascipt:;" aria-label="Next"><span aria-hidden="true">»</span></a></li>
<span>总共 <span id="totalPage"></span>页</span>`);
console.log(data);
pageTotal=data;
document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
})
}
//下一页
$("#pageNum").on("click","#nextPage",function() {
currentPage++;
if(currentPage>pageTotal){
showMsg("已经是最后一页了"); // 调用showMsg提示
currentPage=pageTotal
}else{
renderTable(); // 加载页面数据
document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
}
});
// 上一页
$("#pageNum").on("click","#prevPage",function() {
currentPage--;
console.log(currentPage);
console.log(this);
if(currentPage<=0){
showMsg("已经是第一页了"); // 调用showMsg提示
currentPage=1;
}else{
renderTable(); // 加载页面数据
document.getElementById("totalPage").innerHTML=currentPage+"/"+pageTotal;
}
});