今天我在制作自己的个人博客的时候,发现了一个jquer的问题,虽然页面在第一次加载时点击事件生效了,但是在点击下一页后,触发function中先是清除掉enter_article对应的标签,然后重新建了一个enter_article,就在这时候,js点击事件就不起作用了。
所以在用ajax拼接html时,如果有点击事件最好用onclick这样就没什么问题了。
//这里是我拼接的html文本,注意一下里面有一个h1标签的class名称 enter_article
$.each(data.pageContnet,function (i,item) {
var date=new Date(item.saveBlogContent.createDate);//将时间戳转换成日期
var createDate=date.toLocaleDateString();
var html;
html='<div class="article_item">' +
' <div class="article_title">' +
' <span>['+item.saveBlogContent.blogTopic+']</span>'+
' <h1 class="enter_article"><a href="#">'+item.saveBlogContent.blogName+'</a></h1>'+
' </div>'+
'<div class="article_summary">'+item.saveBlogContent.blogSummary+'</div>'+
'<div class="article_visit">' +
' <span>'+createDate+'</span>' +
' <span title="阅读次数">阅读('+item.visitNum+')</span>' +
' <span title="评论次数">评论('+item.commentNum+')</span>' +
' </div>'+
'</div>';
$("#article_list_container").append(html);
});
//这里绑定的类 .enter_article 点击事件
$(".enter_article").bind("click",function () {
getArticle();
});
function getArticle() {
alert("enter function");
$.ajax({
url: './blogArticle',
type: 'POST',
dateType: "JSON",
async: false,
timeout: 15000,
data:{
"blogid":2
},
success:function (data) {
console.log(data);
var mes = eval("(" + data + ")");
console.log(mes);
console.log(mes.saveBlogContent.blogHtml);
console.log(mes.saveBlogContent.blogName);
console.log(mes.saveBlogContent.blogTopic);
console.log(mes.saveBlogContent.createDate);
},
error:function () {
console.log("error")
}
});